【问题标题】:How to check Checkbox checked in the table or not如何检查表格中的复选框是否选中
【发布时间】:2019-10-30 16:17:45
【问题描述】:

我是 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
}

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

【问题讨论】:

    标签: javascript reactjs


    【解决方案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
                 }
    

    【讨论】:

    • 实际上,这将告诉天气该复选框是否被选中。所以,我正在尝试的是用户是否从两个差异表中检查。
    • @GaneshKaspate 你可以创建 jash 对象来保持跟踪或这个。请检查更新的答案
    • 我刚刚更新了这个问题。现在,我尝试了你的方法。我面临一个问题,你能告诉我我做错了什么吗?
    • @GaneshKaspate 不创建数组。使用哈希对象进行操作
    • 真的很抱歉,但我是新手,所以我实际上不知道如何创建它。正如我所搜索的那样
    猜你喜欢
    • 1970-01-01
    • 2019-01-12
    • 1970-01-01
    • 2014-09-14
    相关资源
    最近更新 更多