陣營：如何篩選陣列的onClick隨後的setState未選擇按鈕

我有5個不同的按鈕，當點擊某個按鈕，例如button 1然後state one將返回true然而buttons two, three, four and five將返回false我想要做的是。我想要實現的是在單擊某個按鈕時替換按鈕的className。陣營：如何篩選陣列的onClick隨後的setState未選擇按鈕

現在在我的代碼中，當單擊按鈕時，我傳遞的值將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

來源

2017-06-22 kcNeko

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

來源

2017-06-22 02:06:40

真棒，謝謝:)這是比我更簡潔 – kcNeko

我只是思前想的東西和我所做的是將所有狀態爲false然後設置特定的按鈕，我點擊正確的。因此，它是這樣的

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

來源

2017-06-22 02:00:55 kcNeko

如果你想要一個更簡潔的解決方案，來看看我的 –

陣營：如何篩選陣列的onClick隨後的setState未選擇按鈕

回答

相關問題