Javascript 基于React中的唯一键禁用按钮？

我有多个为多个项目呈现的按钮。所有按钮都有一个我传递给键的唯一id，我正试图根据唯一id禁用该按钮。禁用布尔值处于状态，单击按钮时，我希望它禁用该唯一按钮

但是，我使用的代码禁用了渲染的所有按钮

在我所在的州，我使用map来访问parks items数组，因此如果我将按钮转换为一个在该州具有唯一键的数组，我不确定如何映射这些按钮

以下是我目前掌握的情况：

我国：

this.state = {
  parks: [],
  todos: [],
  disabled: false
};

按钮：

<button
 key={item.id} //this id is coming from the mapped array "parks" state
 disabled={this.state.disabled}
 onClick={() =>
    this.setState({
    todos: [...this.state.todos, item.name], //this adds the parks 
                                             //state items to the todos 
                                             //state array
    disabled: true
      })
    }
  >

这是我的国家({
todos:[…this.state.todos，item.name]，//这将添加
//将项目列为待办事项
//状态数组
残疾人士：对
})
}
>

您可以使用数组，而不是使用布尔值，在该数组中，您可以跟踪要禁用的ID（=单击的ID）

在onClick处理程序中，将按钮的id添加到state内的禁用数组中。

---

对于按钮，您只需检查item.id是否在this.state.disabled数组中。

您可以使用一个数组，在该数组中跟踪您要禁用的id（=单击的id），而不是使用布尔值

在onClick处理程序中，将按钮的id添加到state内的禁用数组中。

---

对于按钮，您只需检查item.id是否在this.state.disabled数组中。

您可以通过将

disabled

状态设置为包含

items

id的数组来实现它

然后在

disabled={this.state.disabled.indexOf（item.id）！==-1}

行中，它检查

disabled

数组中是否存在当前按钮，

.indexOf

方法返回-1（如果要搜索的值从未出现）

类TodoApp扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
公园：[
{id:'a'，name:“学习JavaScript”}，
{id:'b'，name:“Learn React”}，
{id:'c'，name:“在JSFiddle中玩转”}，
{id:'d'，name:'buildsomesomesomesome'}
],
待办事项：[]，
已禁用：[]，
}
}
render（）{console.log（'todos'，this.state.todos）
返回(
待办事项：
{this.state.parks.map（项=>(
这是我的国家({
todos:[…this.state.todos，item.name]，
已禁用：[…this.state.disabled，item.id]
})
}
>
{item.name}
))}
)
}
}
ReactDOM.render（，document.querySelector（#app））

---

您可以通过将

禁用

状态设置为包含

项

id的数组来实现

然后在

disabled={this.state.disabled.indexOf（item.id）！==-1}

行中，它检查

disabled

数组中是否存在当前按钮，

.indexOf

方法返回-1（如果要搜索的值从未出现）

类TodoApp扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
公园：[
{id:'a'，name:“学习JavaScript”}，
{id:'b'，name:“Learn React”}，
{id:'c'，name:“在JSFiddle中玩转”}，
{id:'d'，name:'buildsomesomesomesome'}
],
待办事项：[]，
已禁用：[]，
}
}
render（）{console.log（'todos'，this.state.todos）
返回(
待办事项：
{this.state.parks.map（项=>(
这是我的国家({
todos:[…this.state.todos，item.name]，
已禁用：[…this.state.disabled，item.id]
})
}
>
{item.name}
))}
)
}
}
ReactDOM.render（，document.querySelector（#app））