如何在不创建状态变量的情况下为 MUI 文本字段设置错误状态

Question

我目前有 10 多个输入字段需要针对空用户输入进行表单验证。似乎传统的路线是创建一个状态变量来处理这个：

const [error, triggerError] = React.useState(false)

如果值为空则触发它

onSubmit

userInput === '' ? triggerError(true) : triggerError(false)

问题

但是，随着表单元素数量的增加，这些状态变量也会增加，这是不受欢迎的，因为它会使代码混乱。有没有办法从 onSubmit 函数或组件本身强制将文本字段设置为错误状态？

尝试的解决方案

(1) 来自

onSubmit

：

document.getElementById(e.target.id).error = true

(2) 从

TextField

分量：

error: {this.value === '' ? true : false}

可能的解决方案？

对于 MUIv4，这是

getElementById(e.target.id)

的检查元素输出：

MuiInputBase-root MuiOutlinedInput-root Mui-error Mui-error MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline MuiInputBase-marginDense MuiOutlinedInput-marginDense

也许我们可以附加错误 CSS 类来触发

onSubmit

函数的错误？

如果我能以任何方式澄清问题，请告诉我，并提前致谢