Question

我试图让一个select选项更改ReactJS中组件的一个元素。

＆＃34;数据____＆＃34;是用于线图的数据对象。但是，在渲染下

我的逻辑是：

select值有一个onChange函数，只要选择了不同的年份，它就会调用handleChange。一旦调用了handleChange，它将运行if语句以查看该字符串是否等于列出的4个选项。一旦找到它，就会设置＆＃34; this.value＆＃34;到实际的数据对象。

然后数据对象将传递给＆＃34;数据＆＃34; LineTooltip中的元素为＆＃34; THIS.VALUE＆＃34;

然而，错误是没有定义值，但我不确定它的含义。

＆＃13;

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>
    )
  }
}

＆＃13;

Answer 1

您必须通过设置新值来更新this.state。你不需要所有那些if s。'

您的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>
    )
  }
}

reactjs onchange - 条件元素呈现

1 个答案: