在 react-bootstrap 中清除特定的 select

Question

我需要清除第二個 select 如果它已經有一個選定的值，以防第一個選擇B 。

清理時，它需要removed 、 disabled該值，並且默認情況下它具有Select...選項。

import React, { useState } from "react";
import { Form, Col, Button } from "react-bootstrap";

const App = () => {
  const [data, setData] = useState({
    to: "",
    from: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  return (
    <Form>
      <Form.Row>
        <Form.Group as={Col} md="auto">
          <Form.Label>to</Form.Label>
          <Form.Control
            required
            name="to"
            as="select"
            placeholder="to"
            onChange={handleChange}
          >
            <option hidden value="" selected>
              Select...
            </option>
            <option value="A">A</option>
            <option value="B">B</option>
          </Form.Control>
        </Form.Group>
        <Form.Group as={Col} md="auto">
          <Form.Label>from</Form.Label>
          <Form.Control
            required
            name="from"
            as="select"
            placeholder="from"
            onChange={handleChange}
          >
            <option hidden value="" selected>
              Select...
            </option>
            <option value="A">A</option>
            <option value="B">B</option>
          </Form.Control>
        </Form.Group>
        <Button variant="primary">Ok</Button>
      </Form.Row>
    </Form>
  );
};

export default App;

我怎樣才能修改上面的代碼來做我評論的事情？ 謝謝！

Answer 1

您在這里遇到的是cascading問題，您的第二個 select 取決於第一個 select。 在您的手柄更改中，您可以執行此操作

  const handleChange = (e) => {
    const { name, value } = e.target;
    if(name === 'to' && data.from){
      setData((prevState) => ({
        ...prevState,
        [name]: value,
        from: ''
      }));
    } else {
      setData((prevState) => ({
        ...prevState,
        [name]: value,
      }));
    }
  };

我們正在檢查我們正在更改的值是否是第一個 select 以及第二個 select 是否已經有一個值。 如果是，那么我們正在清除第二個 select 中的值。

此外，由於您使用 state 來保留表單值，因此您需要將value屬性添加到組件中以使其成為受控組件。

 <Form.Control
     required
     name="to"
     as="select"
     placeholder="to"
     value={data.to} // add this prop
     onChange={handleChange}
  >
    <option hidden value="">
       Select...
    </option>
    <option value="A">A</option>
    <option value="B">B</option>
 </Form.Control>