Отключить кнопку на основе уникального ключа в React?

Question

У меня есть несколько кнопок, которые отображаются для нескольких элементов.Все кнопки имеют уникальный идентификатор, который я передал ключу, и я пытаюсь отключить кнопку на основе уникального идентификатора.Отключить логическое значение находится в состоянии, и когда кнопка нажата, я хочу, чтобы она отключила эту уникальную кнопку.

Однако код, который у меня есть, отключает все отображаемые кнопки.

Я использовал map для доступа к массиву элементов парков в моем состоянии, поэтому я не уверен, как бы я отобразил на кнопки, если бы я превратил их в массив с уникальными ключами в состоянии.

Вот что у меня есть:

Мое состояние:

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

Этого можно достичь, превратив состояние disabled в массивы, содержащие идентификатор items '.

Затем в строке disabled={this.state.disabled.indexOf(item.id)!==-1} проверяется, существует ли текущая кнопка в массиве disabled, метод .indexOf возвращает -1, если значение для поиска никогда не встречается.

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>

Answer 2

Вместо логического значения вы можете использовать массив, в котором вы будете отслеживать идентификаторы, которые вы хотите отключить (= которые вы нажали).

В обработчике onClick вы добавляетеидентификатор кнопки для отключенного массива в состоянии.Для кнопок вы просто проверяете, находится ли item.id в массиве this.state.disabled.