React-Bootstrap表单拆分组件后无法获取选中值求助

问题根源 #

1. 组件参数接收错误：SelectField组件直接将onSubmit作为参数，React组件接收props的正确方式应为对象解构或props参数。
2. 事件绑定错误：下拉框值变化应绑定onChange事件，而非onSubmit。
3. 状态隔离：选中状态放在子组件内部，父组件FormTestPage无法访问该状态值，需通过状态提升将状态移至父组件。

修复后的代码 #

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();
    // 直接访问父组件的selected状态
    console.log(selected);
  };

  return (
    <Form onSubmit={onSubmit}>
      {/* 将状态值和更新方法传给子组件 */}
      <SelectField value={selected} onChange={setSelected} />
      <Button variant="primary" type="submit">
        Selected
      </Button>
    </Form>
  );
}

SelectField 子组件

import Form from "react-bootstrap/Form";

// 解构接收父组件传递的props
function SelectField({ value, onChange }) {
  return (
    <Form.Group className="InputField">
      <Form.Label>Level</Form.Label>
      <Form.Control
        as="select"
        value={value} // 使用父组件传递的状态值
        onChange={(event) => onChange(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;

修复说明 #

• 把下拉框的状态selected和更新方法setSelected移到父组件FormTestPage中，实现状态共享。
• 子组件SelectField仅负责渲染下拉框，并通过onChange事件将选中值传递给父组件的更新方法。
• 提交表单时，父组件直接读取自身维护的selected状态即可获取选中值。

内容的提问来源于stack exchange，提问作者dannisis