Question

听到反应js组件的构造函数

constructor(props) {
    super(props);
    this.state = {
        array : []
    }
    this.displayPageView = this.displayPageView.bind(this);
    this.onChange = this.onChange.bind(this);
}

单击复选框，在状态数组

中按下该值时，听到Chnage函数

onChange(e) {
    console.log("e.target.name >>",e.target.name)
    console.log("e.target.value >>",e.target.value);
    remove(this.state.array,{ [e.target.name] : !parseInt(e.target.value) })
    this.state.array.push({ [e.target.name] : !parseInt(e.target.value) });
    console.log("array >>",this.state.array)
    //this.setState({ [e.target.name] : e.target.value });
}

听到负载复选框视图

displayPageView(){
    const id = parseInt(this.props.params.id);
    const memberships = find(this.props.currentPageData.data.memberships,{ id : id });
    const accessKey = JSON.parse(memberships.access_key);
    console.log("accessKey >>",accessKey);
    return map(accessKey, (value,key) =>(
        <div className="form-group col-sm-2" key={key}>
            {ucfirst(key)}
            {
                map(value, (value2,key2) =>(
                    <div className="checkbox" key={key+"_"+key2}>
                        <label key={key+"_"+key2}>
                            <input type='checkbox' key={key+"_"+key2} ref={value2} name={key+"_"+key2} value={value2} checked={(parseInt(value2)) ? true : false } onChange={this.onChange}></input>
                            {(key2=='index') ? 'List' : ucfirst(key2)}
                        </label>
                    </div>
                ))
            }
        </div>
    ));
}

当我点击复选框时，在数组状态对象表单中按下该名称和值，我也想更改复选框选中的值（true / false）。

Answer 1

请勿直接改变state，而应使用setState()：

onChange(e) {
    let newArray = this.state.array.slice();
    remove(newArray, { [e.target.name] : !parseInt(e.target.value) });
    this.setState({
      array: newArray.concat({ [e.target.name] : !parseInt(e.target.value) })
    });
}

一旦您的状态更新正确，复选框也应该适当显示更新：我为您创建了一支笔：codepen.io/danegit/pen/YEWYjx?editors=1010查看并使用它。您可以看到state的值绑定到复选框

响应js输入复选框切换值

1 个答案: