在反应js中需要任何一个字段验证

Question

我想要 email id 或电话号码所需的任何一个文本字段。 如果该字段应该在网格项中，我应该编写什么代码。

Answer 1

如果电话无效，您可以使用条件渲染到 email 并在 email 无效时渲染电话文本字段。

const App = () => {
    const [isEmailValid, setIsEmailValid] = useState(false);
    const [isPhoneValid, setIsPhoneValid] = useState(false);
    const [email, setEmail] = useState("");
    const [phone, setPhone] = useState("");

    return (
        <div>
            { isPhoneValid ? null : (
                <input 
                    type="email" 
                    placeholder="Enter Email" 
                    onChange={event => {
                                        setIsEmailValid(true)
                                        setEmail(event.target.value)
                                      }
                              }
             ) }
             { isEmailValid ? null : (
                <input 
                    type="number" 
                    placeholder="Enter number" 
                    onChange={event => {
                                        setIsPhoneValid(true)
                                        setPhone(event.target.value)
                                      }
                              }
             ) }
        </div>
    );
}