Question

在我的react-app中，我有一个从数组动态呈现的列表，每个项目都有一个复选框和一个输入，默认情况下该输入是禁用的，当我单击该复选框时，如果满足则应启用此输入在特定条件下，我已经设法完成了一些工作，但是我遇到了一些问题，例如，当我单击其中一个复选框时，所有输入均已启用，并且此输入具有我希望能够对其进行编辑的值，但是我不能在这里输入代码：

初始状态

cards: [],
disabledInput: false

映射列表：

return this.state.cards.map(card => (
<Checkbox key={card.id} onClick={this.setState({ disabledInput: true })} />
<Input value={this.state.card.name} disabled={this.state.disabledInput} onChange={e => this.setState({ text: e.target.value })} />
));

Answer 1

您需要将每个复选框的初始禁用状态保持为数组，并分别映射到每个复选框。

ptrdiff_t

已编辑：您可以在卡状态本身内保留一个禁用字段，而不必使用单独的数组。

Answer 2

您需要为每张卡维护一个disabledInput标记，此刻所有卡中只有一个。

您的卡状态应类似于-

cards = [{
   name: 'card 1',
   disabledInput: false
}, {
   name: 'card 2',
   disabledInput: true
}]

Answer 3

每个复选框都应具有一个布尔值以管理其自身的状态（是否选中）。我创建了一个Codesandbox可以解决您的问题

更改页面中多个元素的状态

3 个答案: