Question

在我的react应用程序中，我有两个组件可以很好地显示，现在我为每个组件添加了一个布尔值，以便我可以控制它们何时显示。

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

我目前有此代码块，并且状态上的true / false值会正确影响组件的显示/隐藏，但是如何正确使选择框起作用，以便如果我选择“ Net Calories”，它将renderCalories设置为是的，如果我选择胆固醇，它将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>
  );
}

Answer 2

那么首先要注意的是

{this.state.renderCalories && <NetCalorieTrend />}
{this.state.renderCholesterol && <CholesterolTrend />}

执行此操作：

{this.state.renderComponent ? <NetCalorieTrend /> : <CholesterolTrend />}

将处理程序放入类中，然后使用处理程序切换状态值：

handleChange = event => {
    this.setState({
        renderComponent: event.target.value == 10
    })
}

稍后谢谢。祝您编码愉快！

反应，从选择选项设置状态

2 个答案: