javascript - 为什么设置 true/false 值对 React 状态不起作用？

Question

我使用react.js创建了一个下拉菜单来对选项进行排序，但我意识到更改React状态上的 bool 值是无效的。

            <div className="Sort">
                Sort by
              <select 
                value={this.state.selectValue} 
                onChange={this.sorting} 
              >
               <option value="index">Pokedex Index</option>
                <option value="ascecnding">Ascending</option>
                <option value="descending">Descending</option>
              </select>
            </div>

这是我的下拉列表，当选择一个选项时它会调用此函数

sorting(e) {

    if(e.target.value == "index") {

        this.setState({
            indexSort : !this.state.indexSort,
            ascendSort: !this.state.ascendSort,
            descendSort: !this.state.descendSort
        });

    } else if(e.target.value =="ascecnding") {

        this.setState({
            indexSort : !this.state.indexSort,
            ascendSort: !this.state.ascendSort,
            descendSort: !this.state.descendSort
        });

    } else {
        this.setState({
            indexSort : !this.state.indexSort,
            ascendSort: !this.state.ascendSort,
            descendSort: !this.state.descendSort
        });
    }
}

看起来很丑，因为我无法直接设置像indexSort: false。

有更好的方法吗？

Answer 1

我认为您应该拥有单一的事实来源并仅更改该值，而不是拥有三个不同的指示器并打开和关闭它们。

您的<select>的值源自州的selectValue ，所以这是您需要更改的唯一值。其他三个状态属性(indexSort、ascendSort 和 DescendSort)是不必要的。

实例:https://codesandbox.io/s/lxqm8wqj5z

import React, { Component} from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectValue: 'index'
    }
    this.sorting = this.sorting.bind(this);
  }
  sorting(e) {
    this.setState({ selectValue: e.target.value}, function(){
        // see how the state has changed
        // running inside setState's callback,
        // otherwise you don't get the real state
        // due to the normal (expected) delay
        console.log(this.state.selectValue)
    })
  }
  render() {
    return (
      <div>
        <div className="Sort">
          Sort by
          <select value={this.state.selectValue}onChange={this.sorting}>
            <option value="index">Pokedex Index</option>
            <option value="ascending">Ascending</option>
            <option value="descending">Descending</option>
          </select>
        </div>
      </div>
    )
  }
}

render(<App />, document.getElementById('root'));