在ReactJS表单中将错误从组件子级更新为父级

Question

我正在尝试使用图片中显示的X按钮来清理表单中的2个字段。当2个字段中的1个具有值时，以以下形式显示错误（这是正常现象），如果两个字段中的1个为空白（条件是两个字段为空白或两个字段，则显示为1个错误）填充），但是当我单击X按钮时，应删除此错误，因为两个字段可能为空，我遇到的问题是单击X按钮时该错误未被隐藏（该错误应消失）。

您可以在此处看到两个字段：

似乎似乎对formValidation的检查不正确，因为该表单不会更新应该出现在表单中的消息。 （我正在组件字段文件Field.jsx上实现此操作，并且在主表单创建文件Form.jsx中检查formValidation）。我的按钮是这样声明的：

<button
  id="button__value_input"
  name="button_reset"
  type="button"
  className={styles['button']}
  onClick={() => this.resetFields(slug)}
>

我认为我应该将错误更新验证从子组件文件（Form内的字段）发送到父组件文件（Form），但是我可以通过哪种方式将错误更新验证从子组件文件发送到父组件文件应该更新并删除错误消息（因为单击X，错误消息应该以清理这两个字段的正确方式消失了。）

当我在输入字段中进行更改时，formValidation错误会更新，但是使用此重置按钮可以清除字段，错误更新不会反映在父组件字段中。

我在Field.jsx中有导入formValidation文件：

import validateForm from '../../Form/formValidation';

但是我有Form.jsx父组件中的验证检查：

validate = (values) => {
    const errors = validate(values);
    //here are returned the errors:
    return Object.keys(errors).reduce(
      (prev, next) => ({ ...prev, [next]: this.props.intl.formatMessage({ id: errors[next] }) }),
      {},
    );

};

如果我执行更新输入时，会欣赏到up errors行的console.log，但在向上按钮单击的Field.jsx字段中却看不到。

提前感谢您的时间和帮助。