单击“取消”按钮时，跳过对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()。就像在this example中一样。

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