Question

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

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

＆＃13;

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>
    )
  }
})

＆＃13;

谢谢：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>

Answer 2

我只是在思考什么东西，我做的是将所有状态设置为false然后设置我点击的特定按钮为true。所以就像这样

＆＃13;

this.setState({
      one: false,
      two: false,
      three: false,
      four: false,
      five: false
    },() => {
      this.setState(obj)  
    })

＆＃13;

React：如何过滤数组onClick然后setState未选择的按钮

2 个答案: