如何在反应中验证两个输入字段？答案

【问题标题】：How to validate two input fields in react?如何在反应中验证两个输入字段？
【发布时间】：2022-09-27 15:58:52
【问题描述】：

我在验证两个输入字段时遇到了困难。如果只是一个，我觉得会简单很多，但是这里有两个字段。

<form onSubmit={handleSubmit}>
         <TextField
           label=\"Type (Cat/Dog/Fish)\"
           variant=\"outlined\"
           color=\'error\'
           onChange={e => setUserInputPet(e.target.value)}
           value={userInputPet}
         />
         {showPetError && <Typography color=\'error\'>Please enter Cat, Dog, or Fish</Typography>}

         <TextField
           label=\"Gender (Male/Female)\"
           variant=\"outlined\"
           color=\'error\'
           onChange={e => setUserInputGender(e.target.value)}
           value={userInputGender}
         />
         {showGenderError && <Typography color=\'error\'>Please enter Male or Female</Typography>}
</form>

也有用于条件渲染的简单状态

const [showPetError, setShowPetError] = useState(false)
const [showGenderError, setShowGenderError] = useState(false)

目前使用了这么多if statements，但我的目标是非常具体的情况，它不好，而且会损害可读性，而且我知道必须有更有效的方法来做到这一点。

我想做的就是：第一个输入必须接受cat dog 或fish。否则，显示错误。同样，第二个输入必须接受male 或female。否则，显示错误。

请帮忙，我觉得我把一个简单的问题复杂化了

你能不改用单选按钮吗？
您能分享许多“if 语句”吗？因为这似乎是问题所在

标签： javascript reactjs

【解决方案1】：

您可以简单地为errors 创建一个状态并将错误存储在那里。此外，您可以在onSubmit 处理程序中验证您的输入，并且可以摆脱setUserInputPet 和setUserInputGender。对于其他验证，您可以使用 zod 或 yup 之类的包。

【讨论】：