0

Всем привет, есть следующий компонент, требуется получить значнеие из всех импутов, но для чекбокса и радио почему-то не работает. Свойство объекта 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

1 ответ 1

0

Твой код:

https://codesandbox.io/s/so-query-2020-12-20-fmlrz?file=/src/App.js

  1. Что касается checked - ты хочешь получить value - а у этого элемента значение называется checked

  2. radio - ты на него обработчик не повесил.

  3. Не страдай ерундой (если это конечно не в учебных целях) используй Formik https://formik.org/docs/overview

  4. Если тебе не нужна валидация на стороне клиенте (у Formik все в комплекте) - то после нажатия submit ты можешь получить уже заполненный FormData и с ним работать https://learn.javascript.ru/formdata

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.