如何访问 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>
    )
}

而classApp的状态如下：

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

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

<CheckBox {...this.state} />. 这会获取状态中的所有值并通过解构将它们传递下去。
然后你也可以把同样的想法应用到你的活动中，然后做const { name, value } = event.target这和说const name = event.target.name和const value = event.target.value
您也可以在 Checkbox 组件中使用它，这样您就不需要说 props.a function CheckBox({a, b, c, handleChange}){

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

how to access state of checkboxes in ReactJS?

javascript

reactjs

react-props