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

【问题标题】：Changing state for multiple elements in page更改页面中多个元素的状态
【发布时间】：2019-08-17 02:39:27
【问题描述】：

在我的 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 })} />
));

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您需要为每张卡片维护一个disabledInput 标志，此时您在所有卡片中只有一个。

您的卡片状态应该类似于 -

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

【讨论】：

你能在你的回答中实现吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

changeDisableState = (i) => {
  let cards = this.state.cards;
  cards[i].disabledInput = !cards[i].disabledInput;
  this.setState({cards});
}

return this.state.cards.map((card, i) => (
<Checkbox key={card.id} onClick={() => this.changeDisableState(i)} />
<Input value={card.name} disabled={card.disabledInput}/>
));

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

【讨论】：