如何使必填字段動態響應？

Question

您能否告訴我如何動態設置必填字段？

我有兩個字段firstName和lastName 。 名字是必填項 。 如果我在firstName中鍵入test ，我希望lastName成為必填字段 。

可能嗎？

這是我的代碼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）再按一次提交按鈕。

它沒有顯示必需的錯誤。 為什么？

Answer 1

您可以將驗證置於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;
      }}

這里是連接你的codesandbox的修改版本

Answer 2

這是因為

<Field name = "lastName/>

道具不會實時更新。 您可以在validate函數中嘗試console.log（values.firstName）進行確認。 要以這種方式解決這個問題是很麻煩的，只需將key = {values.firstName}添加到Field組件中，就像這樣

<Field key = {values.firstName} name = "lastName" validate = {values.firstName === "test" ? required : ""}> 
...renderStuffs
</Field>