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

【问题标题】：Skip Validation on React-Final-Form when "Cancel" Button Clicked单击“取消”按钮时跳过对 React-Final-Form 的验证
【发布时间】：2020-01-12 20:58:43
【问题描述】：

我有一个验证其表单字段的 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>
        )}/>
  );

【问题讨论】：

底线，要回答这个问题，请指定如何通过 react-final-form 或 final-form 框架之外的其他方式暂停表单验证。
这张海报的问题并非如此，但对于那些通过谷歌搜索到达的人：不要忘记没有type 属性的button 自动具有submit 类型, 因此将 touch 所有字段并显示任何错误，无论其 onClick 函数说什么。为防止这种情况，请添加type=button。
，然后在你的验证函数中= > if(values.btnClicked !== "CANCEL") {...做某事}。这也将允许您绕过验证

标签： reactjs react-final-form

【解决方案1】：

显示错误是因为单击“取消”按钮会模糊该字段，导致 meta.touched 变为真。这不是“调用验证”，错误已经计算出来了。

onCancel 没有被调用对我来说没有意义。当我运行这段代码时，它似乎是肯定的。

如果您想取消以重置表单，您需要致电form.reset()。比如this example。

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

【讨论】：

原始示例过于简化，问题不存在。我认为其他地方的某些逻辑会产生副作用，从而导致问题。感谢您的工作示例。