Реагировать на отправку формы на событие выбора изменений - PullRequest
Новая
       6

Реагировать на отправку формы на событие выбора изменений

0 голосов
/ 10 сентября 2018

Я использую Муравей . У меня есть форма. В этой форме у меня есть кнопка отправки и выберите раскрывающийся список.

когда я нажимаю кнопку отправки, запускается действие отправки формы.

Мне нужно отправить форму и получить значения при событии выбора изменения.

Код песочницы: https://codesandbox.io/s/xrpzw7wn8q

handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  };

Ответы [ 4 ]

0 голосов
/ 10 сентября 2018

Вот код песочницы. https://codesandbox.io/s/r00v7x8r7q

Выберите выпадающий элемент и проверьте консоль на предмет требуемого значения.

У декоратора Getfield нет опции onchange, поэтому удалите его и добавьте событие onchange, чтобы выбрать тег вместо декоратора getfield.

Проверьте муравьиные документы на наличие доступных опций. https://ant.design/components/form/

getFieldDecorator (id, параметры) параметры

0 голосов
/ 10 сентября 2018

Вы можете добавить обратный вызов к событию 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, если должна присутствовать кнопка отправки, она должна инициировать отправку

0 голосов
/ 10 сентября 2018

Добавьте 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]

0 голосов
/ 10 сентября 2018

Вы можете сделать что-то вроде этого: 

<Select allowClear onSelect={ (val, event) => this.handleSubmit(event) }>
...