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的{{1}}字段进行更新。

有任何建议如何处理？

Answer 1

您必须使用state来控制输入字段以处理字符替换问题。在构造函数中将初始状态设置为

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)
}

Answer 2

Formik 现在在他们关于依赖字段的文档中有一个很好的例子

https://formik.org/docs/examples/dependent-fields

React Formik基于另一个更新一个字段

2 个答案: