0

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

2 回答 2

5

您可以通过将disabled状态转换为包含items' id 的数组来实现它。

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

于 2019-02-10T03:37:03.400 回答
0

除了使用布尔值，您还可以使用数组，在其中跟踪您想要禁用的 id（= 您单击的）。

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

于 2019-02-10T03:27:08.727 回答