使用 React Bootstrap 提醒用户错误

2020-10-21 08:00飞浪

介绍

当用户提供错误数据或需要了解某些情况时，警报是向用户显示反馈的理想方式。在本指南中，您将使用 React Bootstrap 库构建一个根据用户输入显示反馈的应用程序。

反应引导

Bootstrap 是 Twitter 上最受欢迎的面向组件的前端框架。与使用实用程序类的其他框架（如 Tailwind CSS）不同， Bootstrap 具有完全可配置的 UI 元素，可帮助您轻松构建功能齐全的应用程序。

设置开发环境

首先，通过运行以下命令设置 React 开发环境。

      npx create-react-app <YOUR_APP_NAME> && cd <YOUR_APP_NAME>

注意：将 <YOUR_APP_NAME> 替换为您喜欢的应用程序名称。

你也可以通过在浏览器中访问https://react.new来快速获得完全配置的环境。

接下来，通过在终端中输入以下命令将 React Bootstrap 添加到您的依赖项中。

      npm install react-bootstrap bootstrap

React Bootstrap 中有两种导入组件的方式。

导入单个组件

      import Card from 'react-bootstrap/Card'

解构

      import { Card } from 'react-bootstrap'

根据文档，建议使用第一种方法，因为“这样做只会提取您使用的特定组件，这可以显著减少最终发送给客户端的代码量”。( https://react-bootstrap.github.io/getting-started/introduction )

实现应用程序

该应用程序提示用户输入一个三个字母的单词，并根据输入向用户显示成功或错误警报。

首先，添加应用程序骨架，如下所示。

      import React, {useState} from "react";\

export default function App(){
	const [value, setValue] = useState("");
  const [isValid, setIsValid] = useState(false);

	function handleSubmission(){}

return (
<div className="App">
  <div>
      <h1>Word Master</h1>
      <p>Enter A Three Letter Word</p>
    <input type="text" onChange={(e) => setValue(e.target.value)} value={value}/>
    <button onClick={handleSubmission}>Submit</button>
    </div>
    </div>
  );
}
    

接下来，实现handleSubmission函数来验证用户的输入，如下所示。

      import React, {useState} from "react";
import Alert from 'react-bootstrap/Alert';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function App(){
	const [value, setValue] = useState("");
  const [isValid, setIsValid] = useState(false);

	function handleSubmission(){
		if (value.length > 3 || value.length < 3){ 
      setIsValid(false)
    }else{
      setIsValid(true)
    }
	}

return (
<div className="App">
{isValid 
      ? <Alert variant="success">Hurray! You're a genius.</Alert>
      : <Alert variant="danger">Oops! Try again</Alert>
}
  <div>
      <h1>Word Master</h1>
      <p>Enter A Three Letter Word</p>
    <input type="text" onChange={(e) => setValue(e.target.value)} value={value}/>
    <button onClick={handleSubmission}>Submit</button>
    </div>
    </div>
  );
}
    

最后，使用 React Bootstrap 警报组件添加控制流以显示错误或成功消息。

      import React, {useState} from "react";

export default function App(){
	const [value, setValue] = useState("");
  const [isValid, setIsValid] = useState(false);

	function handleSubmission(){
		if (value.length > 3 || value.length < 3){ 
      setIsValid(false)
    }else{
      setIsValid(true)
    }
	}

return (
<div className="App">
  <div>
      <h1>Word Master</h1>
      <p>Enter A Three Letter Word</p>
    <input type="text" onChange={(e) => setValue(e.target.value)} value={value}/>
    <button onClick={handleSubmission}>Submit</button>
    </div>
    </div>
  );
}
    

现在输入一个单词并查看从您刚刚构建的世界级单词大师应用程序收到的反馈。

结论

就这样结束了！在本指南中，您学习了如何使用 React Bootstrap 警报组件根据输入的长度向用户显示反馈。您应该尽可能多地尝试以其他方式实现这一点，以帮助您获得更好的理解。在此处阅读有关 React Bootstrap 的更多信息。注意安全！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光25042浏览1350