使用Formik按钮单击正确的答案验证字段输入
使用Formik按钮单击正确的答案验证字段输入
提问于 2021-05-25 13:15:28
我正在编写一个测试检查应用程序，它将字段输入与正确答案进行比较。
当用户填写完所有字段，然后按下"Check“按钮时：
- 如果任何字段中的答案不正确，则应将其文本颜色更改为红色；
- 如果任何字段中的答案是正确的，则该答案应将其文本颜色改为绿色；
更重要的是，单击时会出现一个字段，并显示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 validateField = (e) => {
...some code...
}
{correctAnswers.map((answer) => {
return (
<div className="test-field">
<Field
...
validate={validateField}
...
/>
</div>
);
})}
validate对解决方案有什么建议/线索吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-05-25 14:12:21
通过FieldArray和validationSchema可以实现预期的行为。由于您正在对列表进行映射以呈现，所以我们可以使用来自Formik的FieldArray来呈现Field并处理validation。
使用您的示例创建了代码沙箱。
在字段中键入除正确答案之外的任何值，您将看到在输入字段旁边填充消息wrong answer。
现在，为该字段键入正确的答案。您应该看到输入字段旁边填充了correct answer。
参考
Stack Overflow用户
发布于 2021-05-25 13:42:41
在编写自己的验证逻辑之前，先看看yup。我确信他们有办法解决你的问题。一旦您编写了字段验证方案，就可以在Formik组件中使用它，如下所示：
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>validationSchema in formik：https://formik.org/docs/guides/validation#validationschema
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67688789
复制相关文章
相似问题
腾讯云开发者
