我使用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。

有更好的方法吗？

请您参考如下方法:

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

您的<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'));