我正在尝试使用 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())
}
最佳答案
您的问题出在您的 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
。您的值
类型不同,具体取决于它是单选还是多选,以及采取的操作
。
在这一点上,您如何处理您的值
取决于您。获取该值
,将适当的键应用于您正在发布的数据对象,然后调用您想要保存数据的任何方法。
关于javascript - React - 更改输入时自动提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51471445/