在React.JS中保持<li>过滤器处于活动状态和非活动状态

Question

所以这就是交易：我在React中创建搜索过滤器并希望它们可以切换。彼此分开。我不确定我应该使用哪种方法以及如何操作。任何提示家伙？在这里，我走了多远：

在我的渲染方法中，我有：

  let filterSelectClass = (this.state.selectFilter
  ? "selected"
  : "unselected")

在我回来的时候我有：

<li className={filterSelectClass} id="1" onClick={this.toggleFilter.bind(this, 1)} >1900 - 1925</li>
<li className={filterSelectClass} id="2" onClick={this.toggleFilter.bind(this, 2)} >1925 - 1950</li>

Answer 1

希望这会有所帮助......

我建议你使用classnames来操作反应中的类。我会降低复杂性。

切换多个<li>元素（与AND一样）

class App extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      toggle: {
        one: false,
        two: false,
      }
    }
  }
  
  toggleFilter(e){
    const newObj = {
        [e.target.id]: !this.state.toggle[e.target.id]
      }
    this.setState({
      toggle: Object.assign({}, this.state.toggle, newObj)
    })
  }
  
  render(){
    return <div>
      <li className={this.state.toggle.one ? 'selected' : 'unselected'} id="one" onClick={this.toggleFilter.bind(this)} >1900 - 1925</li>
      <li className={this.state.toggle.two ? 'selected' : 'unselected'} id="two" onClick={this.toggleFilter.bind(this)} >1925 - 1950</li>
    </div>
  }
}

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

.selected {
  background: green;
}

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

切换单个<li>元素（与OR一样）

class App extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      toggle: {
        one: false,
        two: false,
      }
    }
  }
  
  toggleFilter(e){
    this.setState({
      toggle: {
        [e.target.id]: !this.state.toggle[e.target.id]
      }
    })
  }
  
  render(){
    return <div>
      <li className={this.state.toggle.one ? 'selected' : 'unselected'} id="one" onClick={this.toggleFilter.bind(this)} >1900 - 1925</li>
      <li className={this.state.toggle.two ? 'selected' : 'unselected'} id="two" onClick={this.toggleFilter.bind(this)} >1925 - 1950</li>
    </div>
  }
}

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

.selected{
  background: green;
}

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