Форма отправки ответа при выборе события изменения
Я использую муравей дизайн. У меня есть форма. В этой форме у меня есть кнопка отправки и выбирается раскрывающийся список.
когда я нажимаю кнопку отправки, запускается действие отправки формы.
Мне нужно отправить форму и получить значения при выборе события изменения.
Песочница кода: https://codesandbox.io/s/xrpzw7wn8q
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.info("Received values of form: ", values);
}
});
};
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы можете сделать что-нибудь в этом роде:
<Select allowClear onSelect = { (val, event) => this.handleSubmit(event) }>
Вы можете добавить обратный вызов к событию onchange компонента Ant Design Select, который может обрабатывать отправку формы:
<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>
НО с точки зрения UX, если должна присутствовать кнопка отправки, она должна запускать отправку
Добавьте onChange () или onSelect () из ant design select и получите доступ к значениям из формы в обратных вызовах.
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>
Надеюсь, это поможет и достаточно ясно.
Функция handleSubmit используется для доступа к значениям формы из состояния и их отправки. Вызов функции onChange использовался для: 1. Сохраните раскрывающееся значение в состоянии 2. вызовите функцию handleSubmit, чтобы фактически отправить в том же действии [не рекомендуется с точки зрения UX]
Вот песочница кода. https://codesandbox.io/s/r00v7x8r7q
Выберите раскрывающийся список и проверьте консоль на наличие уважаемого значения.
Декоратор Getfield не имеет опции onchange, поэтому удалите его и добавьте событие onchange для выбора тега вместо декоратора getfield.
Проверьте доступные параметры в документации ant. https://ant.design/components/form/
getFieldDecorator(id, options) parameters