Question

我正在使用ant design。我有一个表格。在该表单中，我具有“提交”按钮，然后选择下拉菜单。

当我单击提交按钮时，它将触发表单提交操作。

我需要提交表单并获取有关选择更改事件的值。

代码沙箱：https://codesandbox.io/s/xrpzw7wn8q

handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  };

Answer 1

您可以按照以下方式进行操作：

<Select allowClear onSelect={ (val, event) => this.handleSubmit(event) }>

Answer 2

您可以向Ant Design Select组件的onchange事件添加回调，该回调可以处理表单提交：

<Select
  allowClear
  onChange={
    (value) => {
      // your code to submit the form
    }
  }
>
  <Option key={1} value={1}>
    something 1
  </Option>
  <Option key={2} value={2}>
    something 2
  </Option>
</Select>

但从UX的角度来看，如果必须存在“提交”按钮，则应该触发提交

Answer 3

从ant design选择中添加onChange() or onSelect()并从回调中的表单访问值。

state={
  selectValue : "default value",
  otherFormItemValue: "default other value"
}

handleSubmit = () => {
  serviceCallToSubmitForm(this.state.selectValue, this.state.otherFormItemValue);
}


//In the render() of component

<Select
  onChange={ 
//or onSelect
  (value) => {
    this.setState({selectValue: value}); 
    this.handleSubmit() 
    }
  }
>
  <Option key={1} value={"value 1"}>
    something 1
  </Option>
  <Option key={2} value={"value 2"}>
   something 2
  </Option>
</Select>

<Button onClick={this.handleSubmit}>Submit</Button>

希望这会有所帮助，并且足够清楚。

handleSubmit函数用于从状态访问表单值并提交。过去的onChange函数调用： 1.在状态中存储下拉值 2.调用handleSubmit函数以相同的操作实际提交[不建议在UX方式下使用]

Answer 4

这是代码沙箱。 https://codesandbox.io/s/r00v7x8r7q

选择下拉项，然后在控制台上查看受尊重的值。

Getfield装饰器没有onchange选项，因此将其删除并添加onchange事件以选择标签而不是getfield装饰器。

检查ant文档是否有可用选项。 https://ant.design/components/form/

getFieldDecorator（id，options）参数

在选择更改事件上反应提交表单

4 个答案: