reactjs - 使用反应钩子形式验证字段数组

Question

我想向输入字段添加验证。我正在使用反应钩子形式。验证应该就像字段的总和应该是 100。如果任何字段的总和大于或小于 100，它应该在输入字段（最后编辑的字段）显示错误。

沙盒网址： https ://codesandbox.io/s/distracted-elion-z2wob?file=/src/App.js

谢谢

Answer 1

这个 handleSubmit 函数将获取您的所有字段，获取您的值，添加它们并为您提供总数。您可以在 if-else 语句中处理错误。

 const handleOnSubmit = (form) => {
       console.log('form fields', form.questions)
       let data = form.questions.map( x => x.percentage ).reduce((a,b) => a + b);

      if ( data !== 100) {
        console.log('total', data , ' is not 100');
        //error handling here.
      }
       
  };

沙盒

react-use-form 错误处理<- 错误处理代码和示例在这里。

Answer 2

你为什么不使用范围？您可以将最小值设置为 0，最大值设置为 100-current，这将阻止用户设置任何高于 100 的值。关于 100 以下的值，您可以手动检查。

<input type="range" min="0" max={100-currentTotal} step={1}/>
{currentTotal< 100 && lastEdited? "error the sum should be equal to 100" : null}
// I used 1 as the step, but you can set any value

Answer 3

您只需要使用 Yup 的test()方法来验证总数：

resolver: yupResolver(
  object().shape({
    questions: array()
      .of(
        object().shape({
          percentage: number().typeError('Wrong type.').required('Required.')
        })
      )
      .required()
      .test(
        'sum',
        'The total should be less or equal than 100.',
        (questions = []) => {
          const total = questions.reduce((total, question) => {
            return total + (question.percentage || 0);
          }, 0);

          return total <= 100;
        }
      )
  })
),

如果验证失败，errors对象将如下所示：

{
  "questions": {
    "message": "The total should be less or equal than 100.",
    "type": "sum"
  }
}

然后，您可以使用 显示错误{ errors.questions?.message }。