1

你能告诉我如何动态地制作一个必填字段吗？

我有两个字段firstName和lastName. 名字是必需的。如果我输入firstName，我想lastName成为必填字段。test

可能吗？

这是我的代码 https://codesandbox.io/s/unruffled-pike-5k7jn

 <Field
            name="lastName"
            validate={values.firstName === "test" ? required : ""}
          >
            {({ input, meta }) => (
              <div>
                <label>Last Name</label>
                <input {...input} type="text" placeholder="Last Name" />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>

test只有当用户输入名字字段时，我才能使第二个字段成为必填项吗？

API链接

https://final-form.org/docs/react-final-form/examples

要查看它不起作用，请重现以下步骤：

1) 点击提交按钮。它显示名字是必需的。

2) 在名字字段中输入测试文本。

3) 再次按下提交按钮。

它没有显示所需的错误。为什么？

4

2 回答 2

3

您可以将验证放在 Form 标签中，而不是放置字段级验证

   <Form
      onSubmit={onSubmit}
      validate={values => {
        const errors = {};
        if (!values.firstName) {
          errors.firstName = "Required";
        }
        if (!values.lastName && values.firstName === "test") {
          errors.lastName = "Required";
        }
        return errors;
      }}

这是您的代码框修改版本的链接

于 2019-08-12T13:35:08.283 回答
1

这是因为你的

<Field name = "lastName/>

道具不会实时更新。您可以在 validate 函数中尝试 console.log(values.firstName) 来确认这一点。为了解决这个问题，我的方法是相当的 hack，只需像这样将 key = {values.firstName} 添加到 Field 组件

<Field key = {values.firstName} name = "lastName" validate = {values.firstName === "test" ? required : ""}> 
...renderStuffs
</Field>
于 2019-08-12T12:34:32.223 回答