React：如何过滤数组onClick然后设置未选中的按钮

Question

我有5个不同的按钮，我想做的是当单击某个按钮时，例如按钮1，然后状态一将返回true，然而按钮二、三、四和五将返回false。我想要实现的是在单击某个按钮时替换按钮的className。

现在在我的代码中，当单击button时，我传递的值将setState设置为true。然后将筛选数据数组并将返回设置为false。

import React from 'react'

var data = ["One", "Two", "three", "four", "five"]

export default React.createClass({
  getInitialState(){
    return{
      one: false,
      two: false,
      three: false,
      four: false,
      five: false
    }
  },

  onButtonClick(name){
    var filter = data.filter((item) => {return item != name})

    var obj = {}
    obj[name] = true
    this.setState(obj)
      console.log(filter)
      // can I setState the unclicked buttons from var filter?
  },

  render(){
    return(
      <div>
          <button id="one" onClick={this.onButtonClick.bind(this, "one")} className={!this.state.one ? "btn btn-block btn-default" : "btn btn-block btn-info"}>one</button>
          <button id="two" onClick={this.onButtonClick.bind(this, "two")} className={!this.state.two ? "btn btn-block btn-default" : "btn btn-block btn-info"}>two</button>
          <button id="three" onClick={this.onButtonClick.bind(this, "three")} className={!this.state.three ? "btn btn-block btn-default" : "btn btn-block btn-info"}>three</button>
          <button id="four" onClick={this.onButtonClick.bind(this, "four")} className={!this.state.four ? "btn btn-block btn-default" : "btn btn-block btn-info"}>four</button>
          <button id="five" onClick={this.onButtonClick.bind(this, "five")} className={!this.state.five ? "btn btn-block btn-default" : "btn btn-block btn-info"}>five</button>
      </div>
    )
  }
})

谢谢：D

Answer 1

与其使用5个状态，不如只使用一个，如果状态就应用样式。您还可以根据您的数据变量使用map以编程方式进行。请参见下面的工作示例：

var data = ["one", "two", "three", "four", "five"]

var MyKlass = React.createClass({
  getInitialState(){
    return{
      activeButton: ''
    }
  },

  onButtonClick(name){
    this.setState({
      activeButton: name
    })
  },

  render(){
    console.log(this.state.activeButton)
    
    const buttons = data.map(d => 
      <button id={d} onClick={this.onButtonClick.bind(this, d)} className={this.state.activeButton === d ? "btn btn-block btn-default" : "btn btn-block btn-info"}>{d}</button>
    )
    
    return(
      <div>
          {buttons}
      </div>
    )
  }
});

ReactDOM.render(<MyKlass />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>