Question

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

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

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

1 个答案: