在 React-bootstrap Form 的组件中检索选定的选项值

Question

它是一个可以检索从选项中选择的值的表单。

import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import { useState } from "react";

export default function FormTestPage() {
  const [selected, setSelected] = useState("L1");
  const onSubmit = (event) => {
    event.preventDefault();
    console.log(event.target.value);
  };

  return (
      <Form onSubmit={onSubmit}>
          <Form.Group className="InputField">
          <Form.Label>Level</Form.Label>
          <Form.Control
            as="select"
            value={selected}
            onChange={(event) => setSelected(event.target.value)}
          >
            <option value="L1">L1</option>
            <option value="L2">L2</option>
            <option value="L3">L3</option>
          </Form.Control>
        </Form.Group> 
        <Button variant="primary" type="submit">
          Selected
        </Button>
      </Form>
  );
}

我试图将代码拆分为一个组件以重新使用它，但是在 FormTestPage 中单击提交按钮时无法检索所选的值：

FormTestPage

import SelectField from "../components/SelectField";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";

export default function FormTestPage() {
  const onSubmit = (event) => {
    event.preventDefault();
    console.log(event.target.value);
  };

  return (
      <Form onSubmit={onSubmit}>
        <SelectField onSubmit={onSubmit}/>
        <Button variant="primary" type="submit">
          Selected
        </Button>
      </Form>
  );
}

SelectField

import { useState } from "react";
import Form from "react-bootstrap/Form";

function SelectField(onSubmit) {
  const [selected, setSelected] = useState("L1");
  return (
    <Form.Group className="InputField">
      <Form.Label>Level</Form.Label>
      <Form.Control
        as="select"
        value={selected}
        onSubmit={(event) => {
          setSelected(event.target.value);
        }}
      >
        <option value="L1">L1</option>
        <option value="L2">L2</option>
        <option value="L3">L3</option>
      </Form.Control>
    </Form.Group>
  );
}

export default SelectField;

我也尝试过将 useState 变量作为道具传递给 SelectField 但没有成功。 谢谢

Answer 1

上面的代码有两个问题：

1. FormTestPage组件具有 useState 挂钩并将其变量传递给SelectField 。 它还将接收props.selected选项。 注意L1在 useState 挂钩中作为默认值传递

2. SelectField组件必须从FormTestPage接收 useState 变量及其onChange 事件以设置用户选择的选项。

FormTestPage

import SelectField from "../components/SelectField";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import { useState } from "react";

export default function FormTestPage() {
  const [selected, setSelected] = useState("L1");

  const onSubmit = (event) => {
    event.preventDefault();
    console.log(selected);
  };

  return (
      <Form onSubmit={onSubmit}>
        <SelectField selected=Selected setselected=setSelected/>
        <Button variant="primary" type="submit">
          Selected
        </Button>
      </Form>
  );
}

SelectField

export default function SelectField({ selected, setSelected }) {
 return (
   <Form.Group className="InputField">
     <Form.Label>Level</Form.Label>
     <Form.Control
       as="select"
       value={selected}
       onChange={(event) => {
         setSelected(event.target.value);
       }}
     >
       <option value="L1">L1</option>
       <option value="L2">L2</option>
       <option value="L3">L3</option>
     </Form.Control>
   </Form.Group>
 );
 }