Почему не удаётся получить данные из Input checkbox и radio на react?

Question

[Komi7ar]

Требуется получить данные из формы, не выходит вытащить значение флага и радио, пробовал и value и cheсked = undefined.

В чем дело?

class SecondWindow extends React.Component{
    state = {
        id: null,
        FIO: "",
        position:"",
        birthDay: "",
        sex: bool,
        fired: bool
    };
    
    handleOptionChange = e => {
        this.setState(
            {
                selectedOption:e.target.value
            }
        )
    }

    submitHandler = e => {
        e.preventDefault();
        

        const newUser = {
            id: Date.now().toString(),
            FIO: this.state.FIO,
            position:this.state.position,
            birthDay: this.state.birthDay,
            sex: this.state.sex ,
            fired: this.state.fired
        }
        console.log(this.state.fired.checked);
        console.log(this.state.sex);
      
        this.setState({
            FIO: ""
        })
    }

    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"
                     name ="sex"
                     onChange={this.changeInputHandler}
                    ></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"
                    name ="sex"
                    onChange={this.changeInputHandler}
                    ></input>
                    <label className="form-check-label" htmlFor="flexRadioDefault1">
                    Ж
                    </label>
                
                </div>

                
                
                <div className="form-check">
                    <input className="form-check-input" type="checkbox"  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>
        );
    }
}

Answer 1

[0xD34F]

sex: bool,
fired: bool

Что такое bool? Исправляйте:

sex: null,
fired: false

console.log(this.state.fired.checked);

Это ещё что за на хрен? Свойство checked есть у элемента, но не у значения в стейте. Просто fired.

Радиокнопки - задать value, убрать id, поместить внутрь label'ов (у них, соответственно, убрать for). Ну и сам тэг input, он непарный. Так что закрывающие тэги убрать, в конец открывающих добавить слеш.

Обработчик onChange пусть выглядит так:

changeInputHandler = ({ target: t }) => {
  this.setState(() => ({
    [t.name]: t.type === 'checkbox' ? t.checked : t.value,
  }));
}

Comments

[Komi7ar]

да, это сработало, а почему уменя внутри метода submitHandler

this.setState({
            FIO: ""
        })

не обнуляет импут после нажатия на кнопку?

[0xD34F]

Потому что значение инпута не берётся из стейта. Надо добавить value={this.state.FIO}.

То же самое касается и всех остальных элементов - нигде значения не зависят от того, что в стейте.