javascript - react ，从选择选项设置状态

Question

在我的 react 应用程序中，我有两个显示完美的组件，现在我为每个组件添加了一个状态 bool 值，以便我可以控制它们何时显示。

问题是我想通过选择/下拉菜单来控制它，但我有点卡住了

我目前有这段代码，我的状态的真/假值正确地影响组件的显示/隐藏，但是我如何正确地使选择框工作，以便如果我选择净卡路里，它将 renderCalories 设置为true，如果我选择胆固醇，它会将 renderCholesterol 设置为 true？

const handleChange = event => {
setState(event.target.value);
};

class TrendsComponent extends Component {

state = {
  renderCalories: false,
  renderCholesterol: false,
}

render() {
  return (
    <div>
    {this.state.renderCalories && <NetCalorieTrend />}
    {this.state.renderCholesterol && <CholesterolTrend />}

    <div className={css(styles.TrendsComponent)}>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={age}
        onChange={handleChange}
      >
        <MenuItem value={10}>Net Calories</MenuItem>
        <MenuItem value={20}>Cholesterol</MenuItem>
      </Select>
    </div>

    </div>
  );
}

}

Answer 1

handleChange 应该是 TrendsComponent 中的一个方法，并且应该是 this.setState({...})

class TrendsComponent extends Component {

state = {
  renderCalories: false,
  renderCholesterol: false,
}

handleChange = event => {
  this.setState({
     renderCalories: event.target.value === '10', // typeof event.target.value === sting NOT a number
     renderCholesterol: event.target.value === '20'
   });
};

render() {
  return (
    <div>
    {this.state.renderCalories && <NetCalorieTrend />}
    {this.state.renderCholesterol && <CholesterolTrend />}

    <div className={css(styles.TrendsComponent)}>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={age}
        onChange={this.handleChange}
      >
        <MenuItem value={10}>Net Calories</MenuItem>
        <MenuItem value={20}>Cholesterol</MenuItem>
      </Select>
    </div>

    </div>
  );
}