从函数调用React组件

Question

有一个简单的react应用程序，当登录不好时，或者当发生任何我想提醒用户的事情时，我想调用CustomAlert组件。

理论上，我应该能够将警报类型和警报消息传递给组件，如果有人想点击X.，它应该显示并关闭

如果我在加载时将组件放在页面上，它会显示出来，这样我就知道它在工作，但如果我尝试调用组件并从函数中动态显示它，它不会显示。

下面是一个例子。

在没有任何凭据的情况下点击登录按钮，您可以看到会发生什么。它应该有一个弹出的警告框和一条消息。控制台确实记录短语"；呼叫消息"；在第9行，但它从未显示CustomAlert组件。

https://stackblitz.com/edit/react-dcneac?devtoolsheight=33&file=src/App.js

Answer 1

handleLoginChange和handleLogin的函数需要位于App组件内部。你试图在不存在的事物上设置State。

对于呈现警报，您所需要做的就是在应用程序中有条件地呈现它。不能通过函数来渲染它。在下面的例子中，我创建了一个名为message的新状态，当有消息时，将显示警报。

function CustomAlert(props) {
const [severity] = useState(props.severity);
const [message] = useState(props.message);
return (
<Alert
onClose={() => {
props.close();
}}
severity={severity}
>
{message}
</Alert>
);
}

export default function App() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [message, setMessage] = useState(null);
const handleLoginChange = e => {
if (e.target.name == 'email') {
setEmail(e.target.value);
}
if (e.target.name == 'password') {
setPassword(e.target.value);
}
};
const handleLogin = () => {
axios
.post('https://someplace/api/logMeIn', {
email: email,
password: password
})
.then(response => {
console.log('response', response);
if (!response.data.error) {
localStorage.setItem('token', response.data.token);
setIsLoggedIn(true);
setShowIntro(true);
} else {
setMessage({ type: 'error', message: 'Bad email or password'
console.log('show the alert');
}
})
.then(() => {
getTemplates();
})
.catch(error => {
console.log('error', error);
setMessage({ type: 'error', message: 'Bad email or password' });
});
};
const handleClose = () => {
setMessage(null)
}
return (
<div className="login">
{message && (
<CustomAlert severity={message.type} message={message.message} close={handleClose}/>
)}
<Typography variant="h4" align="center" color="primary">
Please Login
</Typography>
<form>
<TextField
id="email"
label="Email"
name="email"
variant="filled"
onChange={e => handleLoginChange(e)}
/>
<TextField
id="password"
label="Password"
name="password"
variant="filled"
type="password"
onChange={e => handleLoginChange(e)}
/>
<Button
variant="contained"
color="primary"
id="login"
onClick={e => handleLogin(e)}
>
Login
</Button>
</form>
</div>
);
}

编辑

我现在所做的是编辑CustomAlert中的关闭事件，该事件调用关闭道具，该道具调用应用程序组件中的handleClose函数来重置状态。