如何使用 React-Bootstrap 捕获下拉列表的值

介绍

React 的 DOM 处理能力与实用的 UI 相结合，总能让最终用户感到满意。得益于大量开源软件包，React 开发人员现在可以轻松地将任何 UI/UX 库（如 Bootstrap（最流行的 CSS 框架之一））与单页 React 应用程序集成。作为一种即兴创作，Bootstrap 的基于组件的库在与这些前端框架配合使用时更受欢迎。由于其组件架构，每个 UI 组件都被视为 React 组件本身。每个 UI 组件（如表单、输入、工具提示、下拉菜单、模式等）都是 React Bootstrap 中基于 React 的独立组件。本指南将向您展示如何使用 React Bootstrap 为您的表单构建下拉列表并在前端捕获它们的值。

onSelect 事件

就像onChange事件监视输入字段的变化一样，onSelect事件在元素中选择某个值后发生。下拉列表可以更接近常规输入字段，因为在 shell 下，它们都旨在从用户那里获取一些值。要在用户动态更改这些选定值时监听它们，onSelect事件就派上用场了。

onSelect 事件处理程序

在设置onSelect事件来监视值的选择之后，下一步是将动态数据存储在某个地方。为此，每次触发事件时都会调用事件处理程序或简单的 JavaScript 函数，并使用事件对象提取数据。在这种情况下，使用 props 会变得更简单。

执行

设置

确保您的机器上安装了 Nodejs 和 npm（至少版本 8 或更高版本）以及代码编辑器和 Web 浏览器（最好是 Chrome 或 Firefox）。

使用 create-react-app 创建一个新项目：

      npx create-react-app react-bootstrap-dropdown

安装 React Bootstrap

在根目录中，运行以下命令来安装 React Bootstrap 库。

      npm install react-bootstrap bootstrap

这将在项目内安装 Bootstrap 和 React Bootstrap。

清理模板

通常，一个单独的表单组件应该可以处理所有事情，但为了简洁起见，我们将所有代码放在App.js中。从App.js中删除徽标、App.css 及其所有导入。清除应用程序组件内的入门模板。您的App.js应如下所示：

      import React from 'react';

function App() {
  return (
    <div className="App">
      <h2>Hello</h2>
    </div>
  );
}

export default App;
    

添加下拉组件

为了使常规 Bootstrap 样式正常工作，请导入顶部的 Bootstrap 样式：

      import 'bootstrap/dist/css/bootstrap.min.css';

以上相当于在index.html文件中添加 Bootstrap CDN。现在从react-bootstrap导入DropdownButton和Dropdown：

      import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown'
    

在App.js中的 DOM 上呈现它们：

      ....
     <DropdownButton
      alignRight
      title="Dropdown right"
      id="dropdown-menu-align-right"
    
        >
              <Dropdown.Item eventKey="option-1">option-1</Dropdown.Item>
              <Dropdown.Item eventKey="option-2">option-2</Dropdown.Item>
              <Dropdown.Item eventKey="option-3">option 3</Dropdown.Item>
              <Dropdown.Divider />
              <Dropdown.Item eventKey="some link">some link</Dropdown.Item>
      </DropdownButton>
....
    

测试 UI

要查看根目录内的 UI，请运行：

      npm start

这将启动本地开发服务器（通常在端口 3000 上），您可以看到下拉按钮以及下拉字段。

从下拉菜单中获取值

接下来，附加一个在触发onSelect函数时触发的handleSelect函数。将此事件作为prop放在DropdownButton组件内，并创建一个handleSelect函数，该函数接收事件对象并将其记录到控制台。

      ....
 const handleSelect=(e)=>{
    console.log(e);
  }
  ....
   <DropdownButton
      alignRight
      title="Dropdown right"
      id="dropdown-menu-align-right"
      onSelect={handleSelect}
        >
   ....
    

单击字段可查看控制台上显示的字段值。太棒了！您已成功捕获 React Boostrap Dropdown 组件中下拉列表的值。

将捕获的值存储在状态中

对于更实际的用例，您可能希望对这个捕获的值执行某些操作。前端的组件应该将其存储在某个地方，以便可以将其发送到数据库或某个后端。为应用程序组件设置状态，并将下拉列表中选定的值存储在状态变量中。为了避免更改现有代码，请使用钩子将状态数据存储在功能组件中。

      import React,{useState} from 'react';
....


function App() {
  const [value,setValue]=useState('');
  const handleSelect=(e)=>{
    console.log(e);
    setValue(e)
  }
 
  return (
    ...
      <h4>You selected {value}</h4>
    </div>
  );
}

export default App;
    

value是一个状态变量，setValue是设置此状态变量的异步函数。为此，从 React导入useState钩子。在handleSelect函数中调用setValue将状态变量设置为从下拉列表中选择的值。最后，在 JSX 中的 DOM 上输出当前状态值。

尝试选择另一个值并注意 DOM 如何响应状态变化以动态显示所选值。

最后，你的App.js应该如下所示：

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


function App() {
  const [value,setValue]=useState('');
  const handleSelect=(e)=>{
    console.log(e);
    setValue(e)
  }
  return (
    <div className="App container">
      
      <DropdownButton
      alignRight
      title="Dropdown right"
      id="dropdown-menu-align-right"
      onSelect={handleSelect}
        >
              <Dropdown.Item eventKey="option-1">option-1</Dropdown.Item>
              <Dropdown.Item eventKey="option-2">option-2</Dropdown.Item>
              <Dropdown.Item eventKey="option-3">option 3</Dropdown.Item>
              <Dropdown.Divider />
              <Dropdown.Item eventKey="some link">some link</Dropdown.Item>
      </DropdownButton>
      <h4>You selected {value}</h4>
    </div>
  );
}

export default App;
    

如果你收到任何警告或错误，你可以通过更新package.json文件并运行命令npm i来使用本指南中使用的 React-Bootstrap 的精确版本：

      ....
"bootstrap": "^4.4.1",
"react-bootstrap": "^1.0.1",
....
    

结论

对于新手开发人员来说，基于组件的库通常看起来令人生畏和畏惧，但在实际使用中，它们可以提高可读性并减少不必要的代码行。可以使用 React-Bootstrap 方便地构建受控表单组件，尤其是当表单字段需要验证或在提交时必须发送到数据库时。此外，在您的应用中使用 UI 组件肯定会帮助您更快地编写功能代码，因为内置组件使用 props 在后台处理大量典型的 JavaScript。

了解更多

探索 Pluralsight 的这些 React 课程以继续学习：

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

_查看原文