reactjs onchange - 条件元素渲染答案

【问题标题】：reactjs onchange - conditional element renderingreactjs onchange - 条件元素渲染
【发布时间】：2017-05-24 17:50:53
【问题描述】：

我正在尝试让一个选择选项更改 ReactJS 中组件的一个元素。

“Data____”是用于折线图的数据对象。但是，在渲染下

我的逻辑是这样的：

选择值有一个 onChange 函数，该函数将在选择不同年份时调用 handleChange。调用 handleChange 后，它将运行 if 语句以查看字符串是否与列出的 4 个选项等效。一旦找到它，它将“this.value”设置为实际的数据对象。

然后数据对象将传递给 LineTooltip 中的“数据”元素 "this.value"

但是，错误是未定义值，但我不确定它的含义。

class SimpleLineChart extends Component{
  constructor(props) {
    super(props);
    this.state = {value: "Data2017"};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event){
    if (event.target.value == "Data2014"){
      this.value = Data2014;
    }
    else if (event.target.value == "Data2015") {
      this.value = Data2015;
    }
    else if (event.target.value == "Data2016") {
      this.value = Data2016;
    }
    else {
      this.value = Data2017;
    }

    this.setState({value: event.target.value});
  }

  render() {
    return (
      <div className = "retentionlinetooltipchart">
       
        <select value={this.state.value} onChange={this.handleChange} className = "yearrange">
          <option value="Data2014">2014</option>
          <option value="Data2015">2015</option>
          <option value="Data2016">2016</option>
          <option value="Data2017">2017</option>
        </select>

        <LineTooltip 
          title={title}
          data={this.value}
          width={width}
          height={height}
          chartSeries={chartSeries}
          x={x}
          />

      </div>
    )
  }
}

【问题讨论】：

你必须在构造函数中初始化this.value，否则在select发生变化之前它是未定义的。
这成功了！谢谢！

标签： reactjs

【解决方案1】：

您必须通过设置新值来更新this.state。而且你不需要所有这些ifs.´

您的handleChange() 将获得新值。由于它是 <select>，因此传递的唯一值将是您的选项中指定的值。

这就是你所需要的：

handleChange(event){
  this.setState({value: event.target.value});
}

你的完整代码：

class SimpleLineChart extends Component{
  constructor(props) {
    super(props);
    this.state = {value: "Data2017"};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event){
      this.setState({value: event.target.value});
  }

  render() {
    return (
      <div className = "retentionlinetooltipchart">

        <select value={this.state.value} onChange={this.handleChange} className = "yearrange">
          <option value="Data2014">2014</option>
          <option value="Data2015">2015</option>
          <option value="Data2016">2016</option>
          <option value="Data2017">2017</option>
        </select>

        <LineTooltip 
          title={title}
          data={this.value}
          width={width}
          height={height}
          chartSeries={chartSeries}
          x={x}
          />

      </div>
    )
  }
}

【讨论】：