如何选中表中选中的复选框

Question

我是 reactjs 的新手。 这里我有一个渲染表格的组件。 在此有两个表使用不同的数据呈现，但使用相同的组件，我正在使用一些道具传递数据。 现在，在这个我有两个表的复选框。 现在，如果用户从第一个选择并从第二个检查，所以，我想知道天气用户是从一个表中选择还是从两个表中检查。

<td align="center" className="checkbox">
                  <input type="checkbox" name={item.resumeId} checked={!!props.parentState[item.resumeId]} onChange={(e) => { props.handleTableCheckboxChange(e, props.type, props.tableName) }} />
              <a href="#" data-toggle="tooltip" title="Recommendation" onClick={(e) => { props.getReason(e, item.jdId, item.resumeId, item.resumeName) }}><i className="fa fa-info-circle info-icon" style={props.infoIcon} aria-hidden="true"></i></a>
            </td>

所以，这是我有复选框的 td。

handleTableCheckboxChange = (e, type, selectedType) => {
    this.setState({
      [e.target.name]: e.target.checked
    }, () => {
      const checkedItems = this.props[type].content.filter((item) => this.state[item.resumeId])
      this.setState({
        isCheckd: checkedItems.length === this.props[type].length ? true : false,
        isEnable: checkedItems.length > 1 ? true : false,
        isMultipleCheck: checkedItems.length > 1 ? true : false,
        movetype: type === "tracked" ? "Shortlist" : "Longlist" 
      });
    });
  }

在这里，我正在处理复选框的 onClick 事件。 这里的类型是用户选择的类型，是跟踪还是未跟踪的部分。

我试过的是，

this.state = { typeAdded: []  }

创建一个状态变量作为一个空数组，然后每当我们添加任何东西时，这将添加检查的类型。 现在，在这里如果我安慰它，那么第一次值没有被添加到这个数组中，

this.setState(prevState => ({
      typeAdded: [...prevState.typeAdded, type]
    }))

那么，有什么方法可以让我知道用户已经检查了两个表中的一些值。谢谢

我正在尝试的方式是，

this.state = {
  selectedType: {}  
}

 if (e.currentTarget.checked) {
      this.setState({
        selectedType: {
          ...this.state.selectedType,
          [resumeId]: type
        }
      }) else {
     //remove the property from that array
}

在这里，我对如何在不改变状态的情况下从该对象中删除属性感到困惑

Answer 1

应该使用currentTarget.checked来检查状态。

     handleTableCheckboxChange = (event, type, selectedType)=>{
        event.stopPropagation();
        console.log(event.currentTarget.checked); // will be true / false based on checked selection.
//..... rest of the code.

//在散列对象上创建跟踪选定的复选框o受尊重的表

            if(this.tableSelection[selectedType]){
               //checkbox selected from respected table
             }else{
               // not selected
             }