连接一个带有 id 的状态 |反应JS答案

【问题标题】：Concatenate a state with an id | ReactJS连接一个带有 id 的状态 |反应JS
【发布时间】：2020-03-03 23:27:38
【问题描述】：

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

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

有我的状态：

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}

感谢您的帮助。

【问题讨论】：

何时不向 state.tables 数组和 state.reports 数组添加 checked 属性？
@JeremyHarris 在 JSON 数据中？我已经试过了，但没用，我可能做得不好......

标签： reactjs checkbox state

【解决方案1】：

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

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

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

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

【讨论】：