如何验证多个输入字段以匹配特定条件

Question

我有4个输入字段，需要根据彼此的输入进行验证。

所以，如果最大金额超过50000，它必须给出一个错误：最大金额不应该超过50000

一旦任何输入字段发生变化，并且最大金额低于50000，则错误应该会消失。

但对于所有输入来说，这并不是错误的，在这种情况下，它不断返回truthy：

Input1 60000 //ERROR
Input2 10 //ERROR
Input3 10 //ERROR
Input4 10 //ERROR

Input1 40000 //VALID
Input2 10 //ERROR
Input3 10 //ERROR
Input4 10 //ERROR

因此，我需要Input2、3、4在Input1更改并且Input1+Input2+Input3+Input4低于50000 时立即显示VALID

这是我的功能：

let sum = input1 + input2 + input3 + input4
const validator= () => {
if( sum > 50000){
return "Shouln't be above 50000"
}
};

Answer 1

由于有4个输入，因此必须为输入创建4个ref，并创建一个状态来存储错误标志。在此之后，您必须使用每个输入的onChange事件并调用此验证函数。一个示例代码应该是这样的。

import React from 'react'
export const Sample = (props) => {
const [isError, setIsError] = useState(false);
const input1 = useRef();
const input2 = useRef();
const input3 = useRef();
const input4 = useRef();
const validateInputs = () => {
let sum = input1 + input2 + input3 + input4;
if (sum > 5000) {
setIsError(true)
}
else {
setIsError(false)
}

}
return (
<>
<input type='text' value={input1} onChange={() => { input1(e.target.value); validateInputs(); }} />
{isError ? <div>this input has got error</div> : null}
<input type='text' value={input2} onChange={() => { input2(e.target.value); validateInputs(); }} />
{isError ? <div>this input has got error</div> : null}
<input type='text' value={input3} onChange={() => { input3(e.target.value); validateInputs(); }} />
{isError ? <div>this input has got error</div> : null}
<input type='text' value={input4} onChange={() => { input4(e.target.value); validateInputs(); }} />
{isError ? <div>this input has got error</div> : null}
</>
)
}

基本上，您必须使用refs和state值切换。如果您使用类组件，请使用createRef(互联网上有很多文档(