8

我正在使用formik react 库并尝试根据另一个字段的onChange事件更新一个字段。例如，我有一个名为email的字段onChange={onEmailChange.bind(this, setFieldValue)}。

更改电子邮件时调用以下函数：

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

domain这里的想法是使用电子邮件中的域名更新该字段。但无论如何，这里的问题是 usingsetFieldValue似乎阻止了email调用 的字段onChange更新。

有什么建议如何处理吗？

4

2 回答 2

4

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

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)
}
于 2018-06-13T05:07:52.707 回答
3

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

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

于 2020-12-21T19:20:03.970 回答