为什么 不 使用 范围 ？ 您 可以 将 最 小 值 设置 为 0 ， 最 大 值 设置 为 100 - 当前 值 ， 这 将 防止 用户 设置 任何 大于 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

中 的 每 一 个

这个handleSubmit函数将获取所有字段、值，然后将它们相加并提供总数。2你可以在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.
      }
       
  };

sandbox
react-use-form error handling〈-这里有错误处理代码和示例。

您 只 需要 使用 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 } 显示 错误 。

react-hook-form v7.34.0中最近有一个新特性，它提供了这种开箱即用的验证...
您可以在定义字段数组时对其进行设置
在您的情况下，可以在自定义验证函数中运行字段总和== 100的检查

useFieldArray({
  name: 'test',
  rules: {
    validate: (fieldArrayValues) => {
      // check that sum of all fields == 100
    },
  }
})

然后检查/使用错误本身

errors?.test?.root?.message

请参阅此处了解更多详细信息...
https://react-hook-form.com/api/usefieldarray/
https://github.com/react-hook-form/react-hook-form/issues/6879
https://github.com/react-hook-form/react-hook-form/pull/8562