2 回答

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超5個贊
有多種方法可以做到這一點(diǎn),但我建議在初始化為 true 的狀態(tài)下跟蹤按鈕的禁用狀態(tài)。
現(xiàn)在在每次更改電子郵件時運(yùn)行的useEffect中更改禁用狀態(tài),并根據(jù)您的驗(yàn)證將其設(shè)置為 true 或 false。
import React from "react";
// Modify this function as per your needs
const validateEmail = email => typeof email === "string" && email.includes("@");
export default function App() {
const [email, setEmail] = React.useState("");
const [isDisabled, setIsDisabled] = React.useState(true);
const onEmailChange = event => {
setEmail(event.target.value);
};
React.useEffect(() => {
setIsDisabled(!validateEmail(email));
}, [email]);
return (
<>
<input
type="text"
value={email}
onChange={onEmailChange}
placeholder="Insert user email"
/>
<button disabled={isDisabled}>Add</button>
</>
);
}

TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超11個贊
您可以使用regexorder 通過onChange()屬性檢查輸入值是否為電子郵件。
import React from "react";
const regex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
export default function App() {
const [isDisabled, setDisibility] = React.useState(true);
const checkEmail = e => {
setDisibility(!regex.test(e.target.value));
}
return (
<div>
<input onChange={checkEmail} placeholder="email address" />
<button disabled={isDisabled}>add</button>
</div>
);
}
https://codesandbox.io/s/dry-sun-votmt?fontsize=14&hidenavigation=1&theme=dark
添加回答
舉報