radio
建立JSX
input 裡設定 value, 單選中的 value 是寫死的，為了作為與 state 裡的 gender 判斷
<div>
<h3>Radio: </h3>
<label>Male</label>
<input
type="radio"
value="male"
/>
<label>Male</label>
<input
type="radio"
value="female"
/>
</div>
建立 readio 的state
state = {
gender: 'male',
};
建立 radio 的 onChange 事件
input裡新增 onChange={this.onChangeGender}
onChangeGender = e => {
this.setState({
gender: e.target.value
});
};
加上input的 checked 來判斷
加上 input 的 checked 來判斷, state 中的 gender 與選中的input是否相同，若相同則為 true, 則 input 呈現被選中 checked 的樣式
checked={gender === "male"}
checkbox
建立JSX
input裡設定value, 單選中的value是寫死的，為了作為與state裡的 gender判斷
<label>Male</label>
<input type="checkbox" value="male" onChange={this.onChangeLike} checked={like.male} />
<label>Female</label>
<input type="checkbox" value="female" onChange={this.onChangeLike} checked={like.female} />
建立 checkbox 的state
state = {
like: {
male: 'false',
female: 'false',
}
}
建立 checkbox 的 onChange 事件
input 裡新增 onChange={this.onChangeLike}
onChangeLike = e => {
const key = e.target.value
this.setState(state => ({
like: {
...state.like,
[key]: !state.like[key]
}
}))
}