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

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

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

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

此外，单击时会出现一个字段，显示n/10个正确答案，因此需要存储通过/未通过验证的字段数

我试图用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 correctAnswers=[
{id:“1”，name:“1”，正确答案：“三次”}，
{id:“2”，name:“2”，正确答案：“神奇的天气”}，
{id:“3”，姓名：“3”，正确答案：“市政厅”}，
{id:“4”，name:“4”，正确答案：“variation”}，
{id:“5”，name:“5”，正确答案：“Plane”}，
{id:“6”，姓名：“6”，正确答案：“四十多岁”}，
{id:“7”，name:“7”，正确答案：“中频”}，
{id:“8”，姓名：“8”，正确答案：“旅游业”}，
{id:“9”，姓名：“9”，正确答案：“计算机程序员”}，
{id:“10”，name:“10”，正确答案：“Good value”}，
];
{correctAnswers.map（（答案）=>{
返回(
);
})}
`您已得分（${numberOfCorrectAnswers}/10）`
{/*应该执行上述操作*/}
检查
{/*用正确答案填充输入字段*/}
显示
{/*清除字段值*/}
清楚的

我曾考虑为字段添加字段验证功能（根据文档中手动触发验证），但无法真正理解

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

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

validate

常数validateField=（e）=>{
…一些代码。。。
}
{correctAnswers.map（（答案）=>{
返回(
);
})}
验证

---

有任何解决方案的建议/线索吗？

在编写自己的验证逻辑之前，请先查看

yup

。我很肯定他们能解决你的问题。编写字段验证方案后，您可以在Formik组件中使用它，如：

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

formik中的validationSchema：

---

是的：

可以通过

FieldArray

和

validationSchema

实现预期的行为。由于要在列表上进行映射以进行渲染，因此我们可以使用Formik中的

字段数组来渲染
字段
，并处理
验证

使用您的示例创建了代码沙盒


在字段中键入除正确答案之外的任何值，您将看到消息
错误答案
填充在输入字段旁边

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

参考