javascript - 为什么表单收不到 AntD 中的选择数据？

Question

我正在使用 AntD select。 当我将 select 放入单独的组件中时，表单看不到该值 告诉我为什么表单在提交时没有收到数据？

Example

const SelectCust = () => {
return (
  <Select
    mode="multiple"
    placeholder="Please select favourite colors"
    style={{ width: 500 }}
    name="select-multiple"
  >
    <Option value="red">Red</Option>
    <Option value="green">Green</Option>
    <Option value="blue">Blue</Option>
  </Select>
  )};

const Demo = () => {
  const onFinish = values => {
    console.log("Received values of form: ", values); // {custom:undefined}
  };

return (
  <Form name="validate_other" onFinish={onFinish}>
    <Form.Item name="custom" label="Select custom">
      <SelectCust />
    </Form.Item>

    <Form.Item>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
  </Form.Item>
</Form>
)};

Answer 1

如果你包装<Select>与 <Form.Item>它工作正常:

const SelectCust = () => {
  return (
    <Form.Item name="custom" label="Select custom">
      <Select
        mode="multiple"
        placeholder="Please select favourite colors"
        style={{ width: 500 }}
        name="select-multiple"
      >
        <Option value="red">Red</Option>
        <Option value="green">Green</Option>
        <Option value="blue">Blue</Option>
      </Select>
    </Form.Item>
  );
};

此处已更新 Demo组件:

const Demo = () => {
  const onFinish = values => {
    console.log("Received values of form: ", values);
  };

  return (
    <Form name="validate_other" onFinish={onFinish}>
      <SelectCust />

      <Form.Item
        wrapperCol={{
          span: 12,
          offset: 6
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

---

编辑 1

在我看来，包装 <Select> 是错误的与 <Form.Item>解决了问题，所以我查了一下 <Form> documentation .

这里是更新的代码:

const SelectCust = props => {
  return (
    <Select
      mode="multiple"
      placeholder="Please select favourite colors"
      onChange={props.onColorChange}
    >
      <Option value="red">Red</Option>
      <Option value="green">Green</Option>
      <Option value="blue">Blue</Option>
    </Select>
  );
};

const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = values => console.log(values);

  const handleColorChanged = value => {
    form.setFieldsValue({ custom: value });
  };

  return (
    <Form name="validate_other" form={form} onFinish={onFinish}>
      <Form.Item name="custom" label="Select custom">
        <SelectCust onColorChange={handleColorChanged} />
      </Form.Item>

      <Form.Item
        wrapperCol={{
          span: 12,
          offset: 6
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

更新有 3 个重要步骤:

1. 添加const [form] = Form.useForm()在Demo开头组件
2. 实现handleColorChanged函数并将其作为 props 传递给 SelectCust 。处理程序通过调用 form.setFieldsValue() 设置表单值.
3. 密码 from作为<Form>的 Prop 组件