在 react-bootstrap 中清除特定的 select

Question

我需要清除第二个 select 如果它已经有一个 selected 值，以防第一个 selects 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.

中的值

此外，由于您正在使用状态来保留表单值，因此您需要将 value 道具添加到您的组件中以使其成为 Controlled Component。

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

在 react-bootstrap 中清除特定的 select

Clear a specific select in react-bootstrap

javascript

forms

reactjs

react-bootstrap