Question

我正在动态渲染一些复选框，但是目前我只能选中第一个复选框，而所有其他复选框都可以操作第一个复选框。如何使包装箱彼此独立工作？

这是React中的打字稿。我试图更改我在函数中引用的接口，以为我引用的是错误的东西，但是这些都不起作用。

这是功能：

handleCheckboxClick = (entitlement: IApiEntitlements, checked: boolean): void => {
    if (checked === true) {
        this.selectedEntitlementIDs.push(entitlement.id);
    } else {
        const index: number = this.selectedEntitlementIDs.indexOf(entitlement.id);
        this.selectedEntitlementIDs.splice(index, 1);
    }
    //tslint:disable-next-line:prefer-const
    let entitlementChecked: IEntitlementChecked = this.state.entitlementChecked;
    entitlementChecked[entitlement.id] = checked;
    let selectAll: boolean = false;
    if (this.selectedEntitlementIDs.length === this.state.responses.apiResponses.apiClients.length) {
        selectAll = true;
    }
    this.setState({
        entitlementChecked: entitlementChecked,
        selectAll: selectAll
    });
    console.log(this.selectedEntitlementIDs, 'hi');
    console.log(entitlementChecked, 'hello');
}

这就是它的名字：

return (
   <Checkbox
     checked={this.state.entitlementChecked[entitlement.id]}
     data-ci-key={entitlement.id}
     id='api-checkbox'
     key={entitlement.id}
     labelText={entitlement.label}
     onChange={this.handleCheckboxClick}>
   </Checkbox>
);

我希望每个复选框都能够被选中，但是当前第一个复选框可以使用，而其他所有复选框都选中或取消选中第一个复选框。

Answer 1

您不应该将数组作为跟踪选定项的类的属性，这与React生命周期无关，并且可能在您需要时无法更新视图。相反，您只需要使用地图（entitlementChecked）就可以确定是否检查了某些内容。

handleCheckboxClick(id) {
  this.setState(prevState => ({
    entitlementChecked: {
      ...prevState.entitlementChecked,
      [id]: !prevState.entitlementChecked[id]
    }
  }));
}

在调用处理程序方法时，您可以仅通过特定的ID传递

。

onChange={this.handleCheckboxClick.bind(null, item.id)}

如何检查动态呈现的复选框

1 个答案:

Here's a rudimentary example for more detail :)