Javascript 在选择更改事件时响应提交表单

我正在使用。我有一张表格。在这种形式下，我有提交按钮和选择下拉列表

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

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

代码沙盒：

---

你可以按照这些思路做一些事情：

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

this.handleSubmit（事件）}>

您可以向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>

{
//您提交表单的代码
}
}
>
一点
2点

但是从用户体验的角度来看，如果必须存在submit按钮，则应该触发Submiting

添加from ant设计选择并访问回调中表单中的值

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>

状态={
选择值：“默认值”，
otherFormItemValue：“默认其他值”
}
handleSubmit=（）=>{
serviceCallToSubmitForm（this.state.selectValue、this.state.otherFormItemValue）；
}
//在组件的render（）中
{
this.setState（{selectValue:value}）；
this.handleSubmit（）
}
}
>
一点
2点
提交

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

handleSubmit函数用于从状态访问表单值并提交它。 onChange函数调用它用于： 1.将下拉列表值存储在状态中 2.调用handleSubmit函数以在相同的操作中实际提交[不推荐UX方面]

下面是代码沙盒。

选择下拉项并检查console以获取所需的值

Getfield decorator没有onchange选项，因此删除它并添加onchange事件以选择标记而不是Getfield decorator。

检查ant文档以获取可用选项。

getFieldDecorator（id，选项）参数

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>