时间戳

首页 > 解决方案 > React - 更改输入时自动提交表单

javascript - React - 更改输入时自动提交表单

问题描述

我正在尝试使用onChange事件在 React 中自动提交表单。它适用于常规input字段，但不知何故不适用于react-select。这是我的 React 组件的要点。

我专门尝试更新startDateandendDate属性。我也收到了这个警告：EducationForm is changing an uncontrolled input of type text to be controlled。我怀疑这是因为startDate并且endDate没有初始值，所以我在构造函数中添加了这个：

this.state.attributes.startDate = ''
this.state.attributes.endDate = ''

但是，尽管如此，我仍然收到相同的警告。这是我尝试使用标签onChange事件提交表单：Select

<Select
  className='form-control'
  name='startDate'
  value={attributes.startDate}
  required={true}
  onChange={e => {
    this.updateAttribute(e, 'startDate')
  }}
  options={this.options}
/>

<Select
  className='form-control'
  name='endDate'
  value={attributes.endDate}
  required={true}
  onChange={e => {
    this.updateAttribute(e, 'endDate')
  }}
  options={this.options}
/>

updateAttribute调用submitForm方法：

updateAttribute = (e: ReactEvent, attribute: string) => {
  e.preventDefault && e.preventDefault()

  const attributes = {
    ...this.state.attributes,
    [attribute]: e.target ? e.target.value : e
  }
  this.setState({ attributes: attributes }, () => this.submitForm())
}

标签： javascriptreactjsreact-select

解决方案

您的问题出在您的onChange处理程序中。React-Select 有一个非常具体的签名onChange

function (
  One of <
    Object,
    Array<Object>,
    null,
    undefined
  >,
  {
    action required One of <
      "select-option",
      "deselect-option",
      "remove-value",
      "pop-value",
      "set-value",
      "clear",
      "create-option"
    >
  }
  ) => undefined

是的，大多数人对此感到困惑。然后，您的onChange属性将变得更像这样：

onChange={(value, {action}) => this.updateValue(value, action)}

然后，您updateValue的方法会根据所采取的操作类型作用于您选择的值更改。单选中的 React-Select 将为您提供value所选option对象（构成该对象的整个对象option）。多选中的 React-Select 将为您提供一个对象数组作为value. 你的value类型是不同的，取决于它是单选还是多选，以及所action采取的。

value在这一点上，你用你的东西做什么取决于你。拿它value，将适当的键应用于您要发布的数据对象，然后调用您想要保存数据的任何方法。

推荐阅读