React Formik根据另一个字段更新一个字段

Question

我正在使用formik react库，并尝试根据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.onEmailChangeandthis.setFieldValue如果它们是成员函数和 onEmailChange 函数，

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