Реагировать Formik обновления одного поля на основе другого

Question

Я использую formik реагирующую библиотеку и пытаюсь обновить одно поле, основываясь на событии onChange другого.Например, у меня есть одно поле с именем email с onChange={onEmailChange.bind(this, setFieldValue)}.

При изменении электронной почты вызывается следующая функция:

const onEmailChange = (setFieldValue, e) => {
  const domain = e.target.value.replace(/.*@/, '')
  setFieldValue('domain', domain, false)
}

Идея заключается в том, чтобы обновить поле domain, указав имя домена из электронной почты.Но в любом случае проблема заключается в том, что использование setFieldValue, по-видимому, препятствует обновлению поля email, вызывающего onChange.

Есть предложения, как с этим справиться?

Answer 1

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

this.state={
 email:""
}

Измените свой onChange как,

  <input
      type="email"
      name="email"
      onChange={(ev)=>this.setState({email:ev.target.value})}
      onBlur={()=>onEmailChange()}
      value={this.state.email}
    />

используйте this.onEmailChange и this.setFieldValue, если они являются функциями-членами, и функцию onEmailChange как,

const onEmailChange = () => {
  const domain = this.state.email.replace(/.*@/, '')
  this.setFieldValue('domain', domain, false)
}