React JS如何在函数内部呈现警报答案

【问题标题】：React JS how would I render an alert inside of a functionReact JS如何在函数内部呈现警报
【发布时间】：2021-09-23 19:07:22
【问题描述】：

我正在尝试创建一个登录页面，如果登录失败，我想显示一个错误。我在这里调用函数： onClick={ this.login } 但我希望函数显示错误消息而不重新渲染所有内容。该函数在一个类中

【问题讨论】：

这能回答你的问题吗？ React Conditional Rendering

标签： javascript reactjs

【解决方案1】：

试试这样的：


const [username, setUsername] = useState('');
const [error, setError] = useState('');

const handleLogin = async () => {
  // request a login to your server
  const res = await fetch('http://yourapi.com/login');
  // determine if the request was successful
  if (res.error) {
    setError('Invalid input.')
  }
  else {
    // continue
  }
};

return (
  <Form onSubmit={handleLogin}>
     <span>{error}</span>
     <input onChangeText={text => setUsername(text)}/>
  </Form>
);

【讨论】：

【解决方案2】：

通过创建一个在我将变量设置为错误时可见的不可见警报来了解如何做到这一点

         {
          this.state.status && 
          <Alert severity="error">
            <AlertTitle>Error</AlertTitle>
            { this.state.status }
          </Alert>
        }

【讨论】：