Question

通过修复此组件，我遇到了困难。选择复选框多个项目时出现错误。但是在我的其他组件中，没有错误，相同的代码。请在下面检查我的代码，谢谢。

export default class TreeNode extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            collapsed: true,
            checked: []
        }
    }

    onClick(){
        this.setState({
            collapsed : !this.state.collapsed
        });
    }    

    checkBoxHandle(id,e){
        if (e.target.checked){
            let {checked} = this.state
            checked.push(id)
            this.setState({checked :checked })
        } else{
            //If checkbox uncheck = remove in the list
            let {checked} = this.state
            const getIndex = checked.indexOf(id)
            checked.splice(getIndex,1)
            this.setState({checked : checked})
        }
    }

    render(){

        let subtree = null;
        if (this.props.data.children){
            subtree = this.props.data.children.map(function(child){
                return <TreeNode  key= {child.id} data ={child} />;
            }.bind(this))
        }
        const temp_id = this.props.data.id
        var arrowClassName = 'tree-node-arrow';
        var containerClassName = 'tree-node-children'
        if (subtree){
            return (
                <div className="tree-node">       
                    <input type="checkbox" onClick ={this.checkBoxHandle.bind(this,this.props.data.id)}/>
                    <a data-id={this.props.data.id}>
                        {this.props.data.description}
                    </a>

                    <div className={containerClassName}>
                        {subtree}
                    </div>
                </div>
              );
        }
        else {
            return (
                <div className="tree-node-leaf">
                   <input type="checkbox" onClick ={this.checkBoxHandle.bind(this,this.props.data.id)}/>
                    <a data-id={this.props.data.id}>
                        {this.props.data.description}
                    </a>
                </div>
            );
        }
    }
}

每当有选中项目时，我都会更新选中状态，如果用户未选中此复选框，我将删除该状态。

Answer 1

这是因为您在checked和push等splice使用可变方法时组件的状态是不可变的。因此，可以使用rest运算符和filter这样的不变方法来做到这一点：

class Checkboxes extends React.Component {
  state = {
    checked: []
  };

  onChange = (e) => {
    const { checked } = this.state;
    const { id } = e.target;
    if (checked.indexOf(id) === -1) {
      this.setState({
        checked: [...checked, id]
      });
    } else {
      this.setState({ checked: checked.filter(checkedId => checkedId !== id) });
    }
  }

  render() {
    const { checked } = this.state;
    console.log(`CHECKED: ${checked}`);
    return (
      <div className="checkboxes">
        <label htmlFor="checkbox1">Checkbox 1</label>
        <input type="checkbox" onChange={this.onChange} id="1" checked={checked.indexOf("1") !== -1} />
        <br />
        <label htmlFor="checkbox2">Checkbox 2</label>
        <input type="checkbox" onChange={this.onChange} id="2" checked={checked.indexOf("2") !== -1} />
        <br />
        <label htmlFor="checkbox3">Checkbox 3</label>
        <input type="checkbox" onChange={this.onChange} id="3" checked={checked.indexOf("3") !== -1} />
      </div>
    );
  }
}

Here是有效的Codepen示例。

多个ReactJS复选框未选中

1 个答案: