单击“取消”按钮时跳过 React-Final-Form 的验证

Question

我有一个 React-Final-Form 来验证其表单字段。

我想不在单击取消或重置按钮时调用验证。但是，如果单击取消按钮导致无效字段呈现其错误消息，则永远不会调用 onCancel 函数。即使我将按钮类型设置为“重置”，也会发生这种情况。

如果 validate 没有返回更改，则只能到达 onCancel 函数。

  handleSubmit(values) { console.log(JSON.stringify(values, 0, 2)) }

  onCancel() { console.log("cancelled!"); }

  render() {
    const onSubmit = async values => { this.handleSubmit(values); };

   return (
     <Form name="form" 
        onSubmit={onSubmit}
        validate={values => {
                  const errors = {};
                  if (!values.username) { errors.username = 'Required' }
                  return errors }}

        render={({handleSubmit}) => (
          <form onSubmit={handleSubmit}>
            <Field name="username">
              {({ input, meta }) => (
                 <input {...input} type="text" placeholder="Username" autoFocus>
                 {meta.error && meta.touched && <span>{meta.error}/span>}                   
              )}
            </Field>

            <button type="submit">Submit</button>
            <button type="button" onClick={onCancel}>Cancel</button>
          </form>
        )}/>
  );

Answer 1

显示错误是因为单击“取消”按钮会使字段模糊，导致

meta.touched

变为 true。这不是“调用验证”，错误已经计算出来了。

onCancel

没有被调用对我来说没有意义。当我运行这段代码时，这似乎确实是这样。

如果您想取消重置表单，您需要调用

form.reset()

。就像这个例子。

如果您需要不显示错误并且不重置表单，则需要自己管理该状态。

Answer 2

我只是花了几个小时尝试调试类似的问题。原来我只需要更新我的造型：

• 最终形式在 Blur 上运行验证
• onBlur 发生在 onClick 之前，因此当您单击按钮时 - 首先有一个模糊事件，然后应该有一个单击事件（但从未有过单击事件）
• 在 onBlur 期间，验证消息被渲染，导致按钮向下移动。
• 然后发生了点击，但不是点击按钮，因为按钮移动了

Answer 3

我也遇到过类似的问题。
发现这个答案相关 - https://stackoverflow.com/a/74744099/10116675
解决方案 - 由于错误消息，我的取消按钮向下移动，因此我修复了文本输入的高度，以便它不会移动取消按钮。 现在一切正常了。