Почему форма не получает данные выбора в AntD?

Question

Я использую AntD select. Когда я помещаю select в отдельный компонент, форма не видит значение. Скажите, почему форма не получает данные при отправке?

Пример

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

EDIT 1

Мне показалось неправильным, что упаковка <Select> с <Form.Item> решает проблему, поэтому я поискал <Form> документацию .

Вот обновленный код:

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 и передайте ее как реквизит в SelectCust. Обработчик устанавливает значение формы, вызывая form.setFieldsValue().
3. Передайте from в качестве реквизита <Form> компоненту