Question

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

我专门尝试更新startDate和endDate属性。我也收到以下警告：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())
}

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将为您提供所选value的{{1}}对象（组成该option的整个对象）。多重选择中的React-Select将为您提供对象数组作为option。您的value类型是不同的，具体取决于它是单选还是多选以及采用的value。

这时，您可以根据自己的意愿action进行操作。取那个value，将适当的密钥应用于您要发布的数据对象，然后调用您想保存数据的任何方法。

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

1 个答案: