如何以提交的形式获取Select控件的选定值

Question

我有一个form，其中放置了一个select元素（我命名为“ type”），我正在尝试在表单提交后获取每个元素的值。

我尝试了一些方法，但是都没有成功。我当前的代码如下。

<Form
    partner={this.state.selectedPartner}
    onSaveClick={(record) => {
        const form = record.curre
        if (form.checkValidity() === false) {
            console.log('invalid')
            record.preventDefault();
            record.stopPropagation();
        } else {
            this.props.partner.add(
                record.target.elements.name.value, 
                record.target.elements.type.value, 
                record.target.elements.url.value, 
                record.target.elements.description.value
            )
        }                                            
    }}
/>

这会导致 type 元素的未定义。获得该价值的正确方法是什么？

谢谢！

Answer 1

为此使用官方Form.create API。

您应使用 form.getFieldValue或form.getFieldsValue而不滥用event对象。

minimal example如下：

function App({ form }) {
  const [selectValue, setSelectValue] = useState(undefined);
  const onSubmit = e => {
    e.preventDefault();
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values);
      setSelectValue(values.select);
    });
  };
  return (
    <FlexBox>
      <Form onSubmit={onSubmit}>
        <Form.Item hasFeedback>
          {form.getFieldDecorator('select', {
            rules: [{ required: true, message: 'Please select your country!' }]
          })(
            <Select
              placeholder="Please select a country"
              style={{ width: 300 }}
            >
              <Select.Option value="china">China</Select.Option>
              <Select.Option value="usa">U.S.A</Select.Option>
            </Select>
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
      <FlexBox>
        <h3>Selected value after Submit</h3>
        {selectValue}
      </FlexBox>
    </FlexBox>
  );
}

export default Form.create()(App);