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

【问题标题】：React Formik updating one field based on anotherReact Formik 根据另一个字段更新一个字段
【发布时间】：2018-06-13 02:52:16
【问题描述】：

我正在使用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 似乎会阻止调用onChange 的email 字段更新。

任何建议如何处理？

【问题讨论】：

标签： reactjs formik

【解决方案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)
}

【讨论】：

嗯。不知道这里有什么区别？您只是将event 传递给绑定this。无论如何，我尝试了相同的结果。调用setFieldValue 是个问题。
不，首先您已经反向发送了订单，而且您没有发送事件，而是this。
你试过这个代码吗？如果是这样，现在的错误是什么？
是的，我完全尝试了代码，结果相同。它会更新domain 字段，但是当您在email 字段中键入时，它只会输入1 个字母并不断替换自己。所以如果你输入abc，它会变成a，替换为b，替换为c。
好的，我发现了问题，在 Formik 中，原生 handleChange 在内部使用 setState 来设置要更改为自身的字段，所以由于我们使用的是自定义函数 onChange，所以我们需要不仅要在我们正在更新的目标字段上使用setFieldValue，还要在源字段上使用setFieldValue，所以在这种情况下email。

【解决方案2】：

Formik 现在在其有关依赖字段的文档中提供了一个很好的示例

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

【讨论】：

查看此答案以获取简化示例，或者该链接是否断开：stackoverflow.com/a/69229898/9154668
这个例子不是在formik中使用fieldArray。我试图有一个基于 fieldArray 的依赖值。