如何在反應中驗證兩個輸入字段？

Question

編輯 2：我通過將所有答案保存在一個數組中並使用includes來解決這個問題。 無論如何感謝所有幫助過的人

我在驗證兩個輸入字段時遇到了困難。 如果只是一個，我覺得會簡單很多，但是這里有兩個字段。

<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 statement似乎也不起作用：

if (userInputPet.toLowerCase() !== 'dog' || userInputPet.toLowerCase() !== 'cat' || userInputPet.toLowerCase() !== 'fish' ) {
  triggerPetError()
} 

我輸入了狗/貓/魚，它仍然顯示錯誤

編輯：根據要求，下面是我的 if 語句。 抱歉，如果它很混亂/令人困惑，已經工作了很長時間。 順便說一句，if 語句沒有完成，它只是顯示了我一直在做的事情

if (
      (userInputPet.toLowerCase() === 'cat') ||
      (userInputPet.toLowerCase() === 'dog') ||
      (userInputPet.toLowerCase() === 'fish')

      &&

      (userInputGender.toLowerCase() === 'male') ||
      (userInputGender.toLowerCase() === 'female')

    ) {

      console.log('success');

    } else if (
      (userInputPet.toLowerCase() === 'cat') ||
      (userInputPet.toLowerCase() === 'dog') ||
      (userInputPet.toLowerCase() === 'fish')

      &&

      (userInputGender.toLowerCase() !== 'male') ||
      (userInputGender.toLowerCase() !== 'female')      

    ) {
      triggerGenderError()
    }

Answer 1

您可以做的是，如果您已經有一組預定義的答案，您可以將其保存在 arrays 中。 然后，您只需檢查數組中是否存在用戶答案。

這是一個例子：

const typeArr = ['cat','dog','fish']
const genderArr = ['male', 'female']

假設您將用戶輸入值存儲在狀態中，請執行以下操作：

if(!typeArr.includes(userTypeInput.toLowerCase()){
   setShowPetError(true)
} else if (!genderArr.includes(userGenderInput.toLowercase())){
   setShowGenderError(true)
}else{
   //Do your thing
}