Как вызвать две функции в onchange с помощью Formik - PullRequest
Новая
       6

Как вызвать две функции в onchange с помощью Formik

0 голосов
/ 23 апреля 2020

Проблема:

У меня есть выбор ввода в моей форме Formik в реагировать. Мой код выглядит следующим образом: 

<select
    className="form-control offence-select"
    id="exampleFormControlSelect1"
    value={props.values.offenceId}
    onChange={props.handleChange("offenceId")}
    onBlur={props.handleBlur("offenceId")}
 >
     <option value={0}>Select Offence</option>
         {this.renderOption()}
 </select>

Я хочу вызвать две функции внутри onChange, одна из которых - formik props.handleChange, а вторая - обновление пользовательского состояния.

Я сделал что-то вроде этого. 

onChange={e=>{props.handleChange("offenceId");this.handleOffence(props.values.offenceId)}}

Но он вызывает только вторую пользовательскую функцию, но не изменяет значение поля выбора. Я много пытался найти решение этой проблемы, но я не смог этого сделать. Может ли кто-нибудь помочь мне решить эту проблему, исправив способ вызова функции? Спасибо.

Ответы [ 2 ]

1 голос
/ 23 апреля 2020

Вам также нужно будет передать событие, иначе ваши обратные вызовы не будут знать, что является новым значением. Я также не рассчитывал бы на props.values, имеющее новое значение немедленно, поэтому я передал бы значение из события во втором вызове функции. 

<select
    className="form-control offence-select"
    id="exampleFormControlSelect1"
    value={props.values.offenceId}
    onChange={(e) => {
      props.handleChange("offenceId")(e);
      this.handleOffence(e.currentTarget.value);
    }}
    onBlur={props.handleBlur("offenceId")}
 >
     <option value={0}>Select Offence</option>
         {this.renderOption()}
 </select>

Вы также можете дать вашему входу select имя как следует, что упрощает обратные вызовы: 

<select
    name="offenceId"
    className="form-control offence-select"
    id="exampleFormControlSelect1"
    value={props.values.offenceId}
    onChange={(e) => {
      props.handleChange(e);
      this.handleOffence(e.currentTarget.value);
    }}
    onBlur={props.handleBlur}
 >
     <option value={0}>Select Offence</option>
         {this.renderOption()}
 </select>
0 голосов
/ 23 апреля 2020

Попробуйте как: 

<select
    className="form-control offence-select"
    id="exampleFormControlSelect1"
    value={props.values.offenceId}
    onChange={() => {
      props.handleChange("offenceId");
      this.handleOffence(props.values.offenceId);
    }}
    onBlur={props.handleBlur("offenceId")}
 >
     <option value={0}>Select Offence</option>
         {this.renderOption()}
 </select>
...