reactjs - 为什么必需的字段验证在使用反应的形式中不起作用？

Question

嗨，我正在使用react-final-form.I 进行表单验证。我也从这个例子中获得帮助 https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/field-level-validation?from -embed 当我单击submit按钮时，我正在尝试做同样的事情，如果该字段是必需的，它将显示Required错误。

目前，在我的演示中，它没有显示这个

这是我的代码 https://codesandbox.io/s/quizzical-hellman-65dy3

<RFField
    component={SForm.Input}
    label="Name"
    name="name"
    placeholder="Please Enter full Name"
    required={true}
    validate={required}
/>

有什么方法可以显示所需的消息吗？

Answer 1

错误消息可作为道具使用，但您实际上需要设置标记以显示required消息。

您可以重组您的SFormlike this 以使其与semantic-uiand一起使用react-final-form。

  <SForm.Group widths="equal">
    <RFField
      label="Name"
      name="name"
      validate={required}
    >
      {({ input, meta }) => (
        <div>
          <label>First Name</label>
          <SForm.Input {...input} type="text" placeholder="First Name"/>
          {meta.error && meta.touched && <span>{meta.error}</span>}
        </div>
      )}
    </RFField>
    <RFField
      label="last Name"
      name="lastName"
      validate={required}
    >
      {({ input, meta }) => (
        <div>
          <label>Last Name</label>
          <SForm.Input {...input} type="text" placeholder="Last Name"/>
          {meta.error && meta.touched && <span>{meta.error}</span>}
        </div>
      )}
    </RFField>
  </SForm.Group>

查看工作代码：https ://codesandbox.io/s/flamboyant-shtern-s1pgj