javascript - 如何检查表格中的Checkbox是否被选中

Question

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

<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.

//在哈希对象上创建，跟踪选中的复选框或受尊重的表

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