如何在ReactJS中访问复选框的状态？

Question

遵循用于控制表单元素的官方ReactJS文档 ，我设法将以下内容放在一起，但我将复选框保留在单独的函数中：

我有一个名为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>
    )
}

并且类App的状态如下：

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

您的handleChange函数绑定到任意输入字段。 您的实际复选框是完全独立的，并且您尚未向App对象提供对Checkbox对象中的值的访问权限。

您必须使用以下命令将handleChange函数传递给Checkbox对象：

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

Answer 2

不是Jason杀死它的答案，而是清理代码的一种方法是使用Destructuring 。 我发现这是使所有内容更具可读性的好方法，并且随着您继续使用它，您可以使用它做一些整洁的事情。

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>
        )
    }
}

对于那些不想向上滚动到我上面的评论的人，这里是我使用Destructuring清理该组件的两个地方的说明。

1. <CheckBox {...this.state} />. 这会使您的所有值保持状态，并通过Destructuring将它们传递给下级。
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}){