как получить значение checkBox на React
Всем привет, есть следующий компонент, требуется получить значнеие из всех импутов, но для чекбокса и радио почему-то не работает. Свойство объекта fired вообще отоброжается в браузерной консоли как строка, хотя я явно задавал ее как bool переменую. Подскажите, что не так ?
class SecondWindow extends React.Component{
state = {
id: null,
FIO: "",
position:"",
birthDay: "",
sex: bool,
fired: false
};
handleOptionChange = e => {
this.setState(
{
selectedOption:e.target.value
}
)
}
submitHandler = e => {
e.preventDefault();
console.log(this.state.fired)
}
changeInputHandler = e => {
e.persist();
this.setState(prev=>({...prev, ...{
[e.target.name]: e.target.value
}}))
}
render() {
return (
<form onSubmit={this.submitHandler}>
<div className="input-group mb-3">
<input type="text" className="form-control" placeholder="ФИО"
name="FIO"
onChange={this.changeInputHandler}></input>
</div>
<select className="form-select" aria-label="Default select example"
name ="position"
onChange={this.changeInputHandler}>
<option value="Старший разработчик">Старший разработчик</option>
<option value="Младший разработчик">Младший разработчик</option>
<option value="Эйчар">Эйчар</option>
<option value="Уборщик">Уборщик</option>
</select>
<div className="form-group ">
<div className="mb-3"></div>
<input className="form-control" type="date" id="example-date-input"
name ="birthDay"
onChange={this.changeInputHandler}></input>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"></input>
<label className="form-check-label" htmlFor="flexRadioDefault1">
М
</label>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"></input>
<label className="form-check-label" htmlFor="flexRadioDefault1">
Ж
</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckDefault"
name ="fired"
onChange={this.changeInputHandler}
></input>
<label className="form-check-label" htmlFor="flexCheckDefault">
Уволен
</label>
</div>
<button type="button" className="btn btn-success" type="submit">Добавить нового сотрудника</button>
<button type="button" className="btn btn-danger" type="submit">Удалить выбранного сотрудника</button>
</form>
);
}
}
Ответы (1 шт):
Твой код:
https://codesandbox.io/s/so-query-2020-12-20-fmlrz?file=/src/App.js
Что касается checked - ты хочешь получить value - а у этого элемента значение называется checked
radio - ты на него обработчик не повесил.
Не страдай ерундой (если это конечно не в учебных целях) используй Formik https://formik.org/docs/overview
Если тебе не нужна валидация на стороне клиенте (у Formik все в комплекте) - то после нажатия submit ты можешь получить уже заполненный FormData и с ним работать https://learn.javascript.ru/formdata