Javascript 根据选择选项对更改状态作出反应

我需要在状态中存储距离值。它应该等于作为道具通过的距离+用户选择的距离。如何做到这一点

class Distance extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      distance: 0
    };
  }

  onChange = e => {
  }

  render() {
    return (
      <div>
        <p>{this.props.distance}</p>
        <select onChange={this.onChange}>
          <option>30km</option>
          <option>50km</option>
          <option>70km</option>
        </select>
      </div>
    );
  }
}

类距离扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
距离：0
};
}
onChange=e=>{
}
render（）{
返回(
{this.props.distance}

30公里
50公里
70公里
);
}
}

首先将

值

属性添加到

元素中，然后通过

e.currentTarget.value

在

onChange

处理程序中访问

的

值

，如下所示：

class Distance extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      distance: 0
    };
  }

  onChange = e => {

     // Extract value of select like so. Use parseInt for
     // improved type safety
     const valueSelectedByUser = parseInt(e.target.value);

     // Update distance in state via setState()
     this.setState({ distance : this.props.distance + valueSelectedByUser });
  }

  render() {
    return (
      <div>
        <p>{this.props.distance}</p>
        <select onChange={this.onChange}>
          <option value="30">30km</option>
          <option value="50">50km</option>
          <option value="70">70km</option>
        </select>
      </div>
    );
  }
}

类距离扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
距离：0
};
}
onChange=e=>{
//提取select like so的值。对
//改进型安全性
const valueSelectedByUser=parseInt（e.target.value）；
//通过setState（）更新状态中的距离
this.setState（{distance:this.props.distance+valueSelectedByUser}）；
}
render（）{
返回(
{this.props.distance}

30公里
50公里
70公里
);
}
}

您应该包括选择和处理

onChange

事件的值：

class Distance extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      distance: 0
    };
  }

  onChange = e => {
     this.setState({
       distance: this.props.distance ? this.props.distance + e.target.value : e.target.value
     });
  }

  render() {
    return (
      <div>
        <p>{this.props.distance}</p>
        <select onChange={this.onChange}>
          <option value="30">30km</option>
          <option value="50">50km</option>
          <option value="70">70km</option>
        </select>
      </div>
    );
  }
}

类距离扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
距离：0
};
}
onChange=e=>{
这是我的国家({
距离：this.props.distance？this.props.distance+e.target.value:e.target.value
});
}
render（）{
返回(
{this.props.distance}

30公里
50公里
70公里
);
}
}