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

Question

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

我专门尝试更新 startDate 和 endDate 属性。我还收到此警告:EducationForm 正在将不受控制的文本类型输入更改为受控制。我怀疑这是因为 startDate 和 endDate 没有初始值，所以我在构造函数中添加了这个:

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

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

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

Answer 1

您的问题出在您的 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 将为您提供所选 option 的 value 对象(构成该 option 的整个对象)。多选中的 React-Select 将为您提供一个对象数组作为 value。您的值 类型不同，具体取决于它是单选还是多选，以及采取的操作。

在这一点上，您如何处理您的值 取决于您。获取该值，将适当的键应用于您正在发布的数据对象，然后调用您想要保存数据的任何方法。