javascript - 根据选择选项 react 更改状态

Question

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

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

Answer 1

使用功能组件，您可以这样做:

  const Distance = () => {
  const [distance, setDistance] = useState("");

  return (
    <div>
      <p>{distance}</p>
      <select onChange={(e) => setDistance({distance: e.target.value})}>
        <option value="30">30km</option>
        <option value="50">50km</option>
        <option value="70">70km</option>
      </select>
    </div>
  );
};

export default Distance;

如果您有多个输入，并且只有 distance 是一个选择输入，您可以这样做来更新 distance，同时保持其他输入的值:

  const Distance = () => {
  const [input, setInput] = useState({
     distance: "",
     time: "",
     place: "",
  });

  return (
    <div>
      <p>{distance}</p>
      <select onChange={(e) => 
           setInput({ ...input, distance: e.target.value }}
       >
        <option value="30">30km</option>
        <option value="50">50km</option>
        <option value="70">70km</option>
      </select>
    </div>
  );
};

export default Distance;