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