在 React Bootstrap 中使用 ButtonGroup 组件

2020-11-10 08:00:00 · 飞浪

ButtonGroup 是 React Bootstrap 中的一个包装器组件，可用于将按钮分组。它在工具栏、分页、下拉菜单和相关 UI 组件中有许多用例。

介绍

ButtonGroup是 React Bootstrap 中的一个包装器组件，可用于将按钮分组在一起。它在工具栏、分页、下拉菜单和相关 UI 组件中有许多用例。将按钮分组在一起时，您需要一种方法来判断单击组中的哪个按钮会触发事件。例如，如果您有一个用于分页的ButtonGroup组件，则每个Button组件都引用应用中的一个页码。单击按钮时，您需要知道与该按钮关联的页码。

本指南介绍如何使用React Bootstrap 中的ButtonGroup提取有关每个按钮的相关信息。

执行

通过运行以下命令创建一个空的 React 项目：

      npx create-react-app react-buttongroup-app

通过在根目录中运行以下命令来安装 React Bootstrap 和 vanilla Bootstrap：

      npm install react-bootstrap bootstrap

在App组件内部，导入 Bootstrap 的样式表以及来自 React Bootstrap 的Button和ButtonGroup组件。

      import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';

function App() {

  return (
    <div className="App">
      <header className="App-header">
      
      </header>
    </div>
  );
}

export default App;
    

在ButtonGroup组件里面渲染三个Button组件，如下所示。

      import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';

function App() {

  return (
    <div className="App">
      <header className="App-header">
      <ButtonGroup>
        <Button variant="primary" >Button 1</Button>
        <Button variant="danger" > Button 2</Button>
        <Button variant="warning">Button 3</Button>
      </ButtonGroup>
      </header>
    </div>
  );
}

export default App;
    

为了读取ButtonGroup组件内的任何按钮点击，您需要设置一个接收事件对象的onClick处理程序。此事件对象可用于提取有关所点击按钮的信息。在每个Button组件内添加一个value属性，以识别所点击的按钮。

      import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';

function App() {

  return (
    <div className="App">
      <header className="App-header">
      <ButtonGroup>
        <Button variant="primary" value="Button 1">Button 1</Button>
        <Button variant="danger" value="Button 2"> Button 2</Button>
        <Button variant="warning" value="Button 3">Button 3</Button>
      </ButtonGroup>
      </header>
    </div>
  );
}

export default App;
    

当按钮 1被点击时，您需要读取按钮 1 的值，其余按钮也一样。可以通过访问事件对象的目标属性上的value属性（如event.target.value ）来从事件对象中提取此信息。通过在ButtonGroup组件上设置onClick事件，您可以触发函数handleClick，从中获取事件对象所需的信息。

      ...
  const handleClick=(e)=>{
    console.log(e.target.value)
  }
  return (
    <div className="App">
      <header className="App-header">
      <ButtonGroup onClick={handleClick}>
       ...
      </ButtonGroup>
      </header>
    </div>
  );
...
    

最终代码

这是完整的代码。

      import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';

function App() {
  const handleClick=(e)=>{
    console.log(e.target.value)
  }
  return (
    <div className="App">
      <header className="App-header">
      <ButtonGroup onClick={handleClick}>
        <Button variant="primary" value="Button 1">Button 1</Button>
        <Button variant="danger" value="Button 2"> Button 2</Button>
        <Button variant="warning" value="Button 3">Button 3</Button>
      </ButtonGroup>
      </header>
    </div>
  );
}

export default App;
    

When any of the buttons are clicked, the value of that button passes through the onClick handler and can be accessed inside the handleClick function, as shown above. You can check the value by clicking the button and reading the console.

Conclusion

The approach followed in this guide of using ButtonGroup can be extended to input fields and forms as well. You can also use the data-key attribute instead and get the required information by referencing event.target.attributes.getNamedItem('data-key').value. You can use the same concept to build custom dropdown components or a custom toolbar. If you have any questions, feel free to contact me at Codealphabet.

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

_查看原文

技术指南

阅读全文

在 React Bootstrap 中使用 ButtonGroup 组件

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import Button from 'react-bootstrap/Button'; function App() { return ( <div className="App"> <header className="App-header"> <ButtonGroup> <Button variant="primary" >Button 1</Button> <Button variant="danger" > Button 2</Button> <Button variant="warning">Button 3</Button> </ButtonGroup> </header> </div> ); } export default App;

import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import Button from 'react-bootstrap/Button'; function App() { return ( <div className="App"> <header className="App-header"> <ButtonGroup> <Button variant="primary" value="Button 1">Button 1</Button> <Button variant="danger" value="Button 2"> Button 2</Button> <Button variant="warning" value="Button 3">Button 3</Button> </ButtonGroup> </header> </div> ); } export default App;

... const handleClick=(e)=>{ console.log(e.target.value) } return ( <div className="App"> <header className="App-header"> <ButtonGroup onClick={handleClick}> ... </ButtonGroup> </header> </div> ); ...

import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import Button from 'react-bootstrap/Button'; function App() { const handleClick=(e)=>{ console.log(e.target.value) } return ( <div className="App"> <header className="App-header"> <ButtonGroup onClick={handleClick}> <Button variant="primary" value="Button 1">Button 1</Button> <Button variant="danger" value="Button 2"> Button 2</Button> <Button variant="warning" value="Button 3">Button 3</Button> </ButtonGroup> </header> </div> ); } export default App;