Question

我有多个针对多个项目呈现的按钮。所有按钮都有我传递给键的唯一ID，并且我正在尝试根据唯一ID禁用按钮。禁用布尔值处于该状态，当单击按钮时，我希望它禁用该唯一按钮。

但是，我的代码禁用了所有呈现的按钮。

我已经使用map来访问状态下的parks项数组，因此，如果将按钮变成状态中具有唯一键的数组，我不确定如何映射按钮。

这是我到目前为止所拥有的：

我的状态：

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'id的数组来实现。

然后在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

可以使用数组来代替使用布尔值，在该数组中跟踪要禁用的ID（=单击的ID）。

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

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

2 个答案: