根據選擇選項響應更改狀態

Question

我需要將距離值存儲在狀態中。 它應該等於作為道具傳遞的距離+用戶選擇的距離。 這個怎么做？

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;

Answer 2

首先將value屬性添加到您的<option>元素，然后在onChange處理程序中通過e.currentTarget.value訪問<select>的value ，如下所示：

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

Answer 3

您應該包含 select 的值並處理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>
    );
  }
}

Answer 4

您可以像這樣簡單地執行此操作，我已將您的代碼轉換為功能組件並對其進行了修改，試試這個。

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

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

export default Distance;