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

该州的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来清理这个组件的两个地方。

<CheckBox {...this.state} />.这会将您的所有值置于状态，并通过Destructuring将其传递下来。
您也可以采取同样的想法并将其应用到您的活动中并执行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中的复选框状态？

2 个答案: