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

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

初始状态

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

返回这个.state.cards.map（card=>(
this.setState（{text:e.target.value}）}/>
));

您需要为每张卡维护一个

禁用输入

标志，此时所有卡上只有一个标志

您的卡状态应该类似于-

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

---

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

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

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

cards=[{
姓名：‘卡1’，
disabledInput：对
}, {
姓名：‘卡2’，
disabledInput：对
}]
changeDisableState=（i）=>{
让cards=this.state.cards；
卡片[i].disabledInput=！卡片[i].disabledInput；
这个.setState（{cards}）；
}
返回此.state.cards.map（（card，i）=>(
this.changeDisableState（i）}/>
));

---

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

您能在回答中实现这一点吗？