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

Question

我有多个为多个项目呈现的按钮。所有按钮都有一个我传递给密钥的唯一 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
      })
    }
  >

Answer 1

您可以使用一个数组来代替布尔值，您可以在其中跟踪要禁用的 ID（= 您点击的 ID）。

在 onClick 处理程序中，您将按钮的 ID 添加到状态中的禁用数组。对于按钮，您只需检查 item.id 是否在 this.state.disabled 数组中。

Answer 2

您可以通过将 disabled 状态放入包含 items' id 的数组中来实现它。

然后在行disabled={this.state.disabled.indexOf(item.id)!==-1}中，它检查当前按钮是否存在于disabled数组中，.indexOf方法returns -1 如果要搜索的值是never发生。

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
     parks: [
       {id: 'a', name: "Learn JavaScript" },
        { id: 'b',name: "Learn React" },
        { id: 'c',name: "Play around in JSFiddle"},
        {id: 'd', name: "Build something awesome" }
      ],
      todos: [],
      disabled: [],
    }
  }
  
  render() {console.log('todos', this.state.todos)
    return (
      <div>
        <h2>Todos:</h2>      
        {this.state.parks.map(item => (
          <button
           key={item.id} //this id is coming from the mapped array "parks" state
           disabled={this.state.disabled.indexOf(item.id)!==-1}
           onClick={() =>
              this.setState({
                  todos: [...this.state.todos, item.name], 
                  disabled: [...this.state.disabled, item.id]
                })
              }
          >
            {item.name}
          </button>
        ))}
   
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

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

Disable button based on unique key in React?

javascript

arrays

reactjs

react-state