使用 Formik 单击按钮时根据正确答案验证字段输入

Question

我正在构建一个测试检查应用程序，它将字段输入与正确答案进行比较。

当用户填写完所有字段然后按下“检查”按钮时：

如果任何字段的答案不正确，该答案应将其文本颜色更改为红色；
如果任何字段的答案是正确的，则该答案应将其文本颜色更改为绿色；

更重要的是，单击时出现一个字段并显示 n/10 个正确答案，因此需要存储字段数，passed/did 未通过验证。

我曾尝试使用 Formik+Yup 来做到这一点，但是当我尝试将其应用于我的任务时，建议的方法并没有真正结合起来。

这里有一段代码：

const correctAnswers = [
    { id: "1", name: "1", correctAnswer: "Three times" },
    { id: "2", name: "2", correctAnswer: "Amazing weather" },
    { id: "3", name: "3", correctAnswer: "Town Hall" },
    { id: "4", name: "4", correctAnswer: "Variety" },
    { id: "5", name: "5", correctAnswer: "Plane" },
    { id: "6", name: "6", correctAnswer: "Over forty" },
    { id: "7", name: "7", correctAnswer: "Mid-range" },
    { id: "8", name: "8", correctAnswer: "Tourism" },
    { id: "9", name: "9", correctAnswer: "Computer programmer" },
    { id: "10", name: "10", correctAnswer: "Good value" },
  ];

<Formik>
  <Form>
    <div className="test-form-window">    
  
      {correctAnswers.map((answer) => {
        return (
          <div className="test-field">
            <Field
              key={answer.correctAnswer}
              className="test-field-input"
              type="text"
              id={answer.id}
              name={answer.id}
            />
          </div>
        );
      })}
    </div>

    <div className="test-results">`You have scored ( ${numberOfCorrectAnswers} / 10 )`</div>

    <div className="form-controls">
      <button className="check-button" onClick={handleCheck}> {/* supposed to do the described above */}
        Check
      </button>
      <button className="show-button" onClick={handleShow}>  {/* fills input fields with correct answers */}
        Show
      </button>
      <button className="clear-button" onClick={handleClear}> {/* clears field values */}
        Clear
      </button>
    </div>

  </Form>
</Formik>

我正在考虑为字段添加字段验证函数（根据文档中的手动触发验证），但无法真正弄明白。


const validateField = (e) => {
  ...some code...
}

{correctAnswers.map((answer) => {
  return (
    <div className="test-field">
      <Field
        ...
        validate={validateField}
        ...
      />
    </div>
  );
})}

validate

任何suggestions/leads解决方案？

Answer 1

在编写自己的验证逻辑之前，请先查看 yup。我很确定他们可以解决您的问题。写好字段验证方案后，您可以在 Formik 组件中使用它，例如：

<Formik
    initialValues={initialValues}
    onSubmit={handleSubmit}
    validationSchema={validationSchema}
      >

formik 中的验证模式：https://formik.org/docs/guides/validation#validationschema

是的：https://github.com/jquense/yup

Answer 2

可以通过 FieldArray 和 validationSchema 实现预期的行为。由于您正在映射要渲染的列表，我们可以使用 Formik 中的 FieldArray 来渲染 Field 并处理 validation。

已使用您的示例创建代码沙箱。

FieldArray Validation Example

在字段中输入除正确答案之外的任何值，您将在输入字段旁边看到消息 wrong answer getting populated。

现在输入该字段的正确答案。您应该会看到 correct answer 在您的输入字段旁边填充。

参考

FieldArray

使用 Formik 单击按钮时根据正确答案验证字段输入

Validate field inputs against correct answers on button click with Formik

javascript

reactjs

formik