时间戳

首页 > 解决方案 > 连接一个带有 id 的状态 | 反应JS

reactjs - 连接一个带有 id 的状态 | 反应JS

问题描述

我有多个复选框，当我单击“全选/无”复选框时，它可以工作，所有复选框都被选中，但我希望能够一个一个地选中每个复选框。我的问题是它们都使用相同的状态。因此，如果我单击一个复选框以仅选中该复选框，则它正在检查所有其他复选框。

所以我的问题是：是否可以将 id 连接到 state ？

有我的状态：

isAllTablesChecked: false,
isAllReportsChecked: false,
isTableChecked: false,
isReportChecked: false,
tables: [
         {id: 1, name: 'Accounts'},
         {id: 2, name: 'Asset Types'},
         {id: 3, name: 'Assets'},
         {id: 4, name: 'Bank Transactions'}
        ],
report: [
         {id: 5, name: 'Aged Payables by Contact'},
         {id: 6, name: 'Aged Receivables by Contact'},
         {id: 7, name: 'Balance Sheet'},
         {id: 8, name: 'Bank Statement'}
        ]

在下面的地图中：

const tables = this.state.tables.map(table =>
      <div>
        <Input
         type="checkbox"
         name={table.name}
         id={this.state.isTableChecked}
         checked={this.state.isTableChecked}
         onClick={this.checkTables}
        />
        <b> {table.name} </b>
      </div>
    )

    const reports = this.state.reports.map(report =>
      <div>
        <Input
         type="checkbox"
         name={report.name}
         id={this.state.isReportChecked}
         checked={this.state.isReportChecked}
         onClick={this.checkReports}
        />
        <b> {report.name} </b>
      </div>
    )

对于<Input>标签中的 id 行，是否可以执行以下操作：

id={this.state.isTableChecked+tables.id}

谢谢你的帮助。

标签： reactjscheckboxstate

解决方案

我找到了解决我的问题的方法。

正如我在回复 Jeremy Harris 时所说，我在状态数组的 JSON 数据中使用了 check 属性。

这是解决方案的链接，它对我有用： https ://medium.com/@tariqul.islam.rony/multiple-checkbox-handling-by-react-js-84b1d49a46c6

希望对你有帮助，我会把这个话题作为解决方案。

推荐阅读