javascript - React:如何过滤数组onClick然后设置未选中按钮的状态

我有5个不同的按钮，我要做的是单击某个按钮时，例如button 1然后state one将返回true，但是buttons two, three, four and five将返回false。
我想要实现的是单击某个按钮时替换按钮的className。

现在在我的代码上，当单击按钮时，我传递的值将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

最佳答案

而不是使用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>