как получить доступ к состоянию флажков в ReactJS?

Question

Следуя официальным ReactJS Docs для управления элементами формы, мне удалось собрать следующее, за исключением того, что я держу флажки в отдельной функции:

У меня есть функция с именем CheckBox(), где я сохраняю флажки:

function CheckBox(props){
    return(
        <div>
            <p>Check all that apply:</p>
            <label>
                <input type="checkbox" name="a" checked={props.a} onChange={props.handleChange}/>
            </label>
            <br/>
            <label>
                <input type="checkbox" name="b" checked={props.b} onChange={props.handleChange}/>
            </label>
            <br/>
            <label>
                <input type="checkbox" name="c" checked={props.c} onChange={props.handleChange}/>
            </label>
            <hr/>
        </div>
    )
}

А класс приложения для государства выглядит следующим образом:

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            fullname: '',
            a: false,
            b: false,
            c: false     
        }
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(e) {
        const target = e.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
           [name]: value,
        });
        console.log(this.state.a);
        console.log(this.state.fullname);
    }
    render(){
        return(
            <div>
                <label>
                    <p>Name</p>
                    <input name="fullname" value={this.state.fullname} onChange={this.handleChange}/>
                </label>
                <CheckBox a={this.state.a} b={this.state.b} c={this.state.c} />
                <hr/>

            </div>
        )
    }
}

Я сохранил два журнала консоли в handleChange(), чтобы проверить состояния. Состояние для имени работает нормально, но я не могу заставить состояние любого из флажков работать.

---

Что я делаю не так в вышеприведенном?

Answer 1

Не ответ, как убил его Джейсон, но способ очистить ваш код - использовать Разрушение .Я считаю, что это отличный способ сделать все немного более читабельным, и по мере того, как вы продолжаете использовать его, вы можете сделать с ним несколько полезных вещей.

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            fullname: '',
            a: false,
            b: false,
            c: false     
        }
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        const {name, value, checked, type } = e.target;
        const newValue = type === 'checkbox' ? checked : value;

        this.setState({
           [name]: newValue,
        });
    }

    render(){
        return(
            <div>
                <label>
                    <p>Name</p>
                    <input name="fullname" value={this.state.fullname} onChange={this.handleChange}/>
                </label>
                <CheckBox {...this.state}/>
                <hr/>

            </div>
        )
    }
}

Для тех, кто не хочет прокручиватьвплоть до моего комментария, приведенного выше, здесь приведено объяснение двух мест, которые я использовал для уничтожения этого компонента.

1. <CheckBox {...this.state} />. Это принимает все ваши значения в состояние и передает их через Деструктурирование.
2. Затем вы можете взять ту же идею и применить ее к вашему событию и выполнить const { name, value } = event.target Это то же самое, что сказать const name = event.target.name и const value = event.target.value
3. Вы также можете использовать это вCheckbox компонента, чтобы вам не нужно было говорить props.a function CheckBox({a, b, c, handleChange}){

Answer 2

Ваша handleChange функция связана с произвольным полем ввода. Ваши фактические флажки полностью отделены, и вы не предоставили объекту App доступ к значениям в объекте Checkbox.

Вы должны передать функцию handleChange объекту Checkbox с помощью

<CheckBox 
    a={this.state.a} 
    b={this.state.b} 
    c={this.state.c} 
    handleChange={this.handleChange}
/>