使用 React-bootstrap 按钮

2019-12-27 08:00:00 · 飞浪

介绍按钮是客户端应用程序中最常用的组件之一。在设计系统中拥有自定义按钮几乎是必需的。市场上最受欢迎的组件库之一Bootstrap为您提供了按钮组件。Bootstrap提供了大量选项，

介绍

按钮是客户端应用程序中最常用的组件之一。在设计系统中拥有自定义按钮几乎是必需的。

市场上最受欢迎的组件库之一 Bootstrap 为您提供了按钮组件。Bootstrap 提供了大量选项，可根据您的需要自定义按钮。但需要注意的是，Bootstrap 依赖 jQuery 来实现功能。如果您正在使用 React 构建应用程序，则需要一些无需 jQuery 即可运行的东西。这就是react-bootstrap 的作用所在。

在本指南中，我将向您展示如何使用 react-bootstrap 库中的按钮组件向您的 react 应用程序添加完全定制的、可重复使用的按钮。

安装

开始使用 react-bootstrap 很简单。你只需要从 npm 添加 Bootstrap 和 react-bootstrap 包：

      yarn add bootstrap react-bootstrap
# or
npm i bootstrap react-bootstrap
    

为了确保您的按钮使用 Bootstrap CSS，您需要将其与按钮组件一起导入到您的应用程序中。

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

现在我们可以开始使用按钮了：

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

const App = () => {
  return (
    <form>
      <label htmlFor='username'>Username</label>
      <input id='username' />
      <Button type='submit'>Submit</Button>
    </form>
  );
};
    

表单中的按钮

按钮不一定只用于提交表单。我们也可以把按钮用作复选框或单选选项。使用按钮的复选框选项列表的示例如下：

      import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
import ToggleButton from 'react-bootstrap/ToggleButton';
const App = () => {
  return (
    <form>
      <label htmlFor='name'>Name</label>
      <input id='name' />

      <label htmlFor='genre'>Favorite genre of music</label>
      <ToggleButtonGroup type='checkbox' name='genre'>
        <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton>
        <ToggleButton value={'jazz'}>Jazz</ToggleButton>
        <ToggleButton value={'country'}>Country</ToggleButton>
      </ToggleButtonGroup>

      <Button type='submit'>Submit</Button>
    </form>
  );
};
    

按钮组

这里我使用了一些组件，使处理多个按钮变得更容易。ToggleButtonGroup组件用于对表单组件进行分组，其中每个ToggleButton都是该组中的一个选项。ToggleButtonGroup采用name属性，类似于<input />上的名称。每个ToggleButton采用value属性，其工作方式类似于<input value={..}>。如果我们需要预先选中任何复选框，我们可以使用defaultValue属性来实现：

      const App = () => {
  return (
    <form>
      <label htmlFor='name'>Name</label>
      <input id='name' />

      <label htmlFor='genre'>Favorite genre of music</label>
      <ToggleButtonGroup
        type='checkbox'
        name='genre'
        defaultValue={['hip_hop', 'jazz']}
      >
        <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton>
        <ToggleButton value={'jazz'}>Jazz</ToggleButton>
        <ToggleButton value={'country'}>Country</ToggleButton>
      </ToggleButtonGroup>

      <Button type='submit'>Submit</Button>
    </form>
  );
};
    

单选按钮也同样适用，只不过你只能预先选择一个选项：

      const App = () => {
  return (
    ...
      <ToggleButtonGroup
        type='radio'
        name='genre'
        defaultValue={['jazz']}
      >
        <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton>
        <ToggleButton value={'jazz'}>Jazz</ToggleButton>
        <ToggleButton value={'country'}>Country</ToggleButton>
      </ToggleButtonGroup>

      <Button type='submit'>Submit</Button>
    ...
  );
};
    

受控国家

使用 React 来控制表单输入的状态非常普遍。控制状态意味着状态变量保存 React 组件中输入的值。您无需在 react-bootstrap 组件中执行任何特殊操作即可实现此功能。您需要在组件上创建一个状态属性，并且需要创建一个函数，当表单输入发生变化时更新状态的值。

      const App = () => {
  const [genre, setGenre] = React.useState();
  const handleGenreChange = (selectedValue) => {
    setGenre(selectedValue)
  }
  return (
    ...
      <ToggleButtonGroup
        type='checkbox'
        name='genre'
        value={genre}
        onChange={handleGenreChange}
      >
        <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton>
        <ToggleButton value={'jazz'}>Jazz</ToggleButton>
        <ToggleButton value={'country'}>Country</ToggleButton>
      </ToggleButtonGroup>

      <Button type='submit'>Submit</Button>
    ...
  );
};
    

加载状态

我们还可以给按钮添加加载状态。当用户点击按钮时需要发出网络请求时，添加加载状态会很有帮助。我们希望确保在网络等待响应时，他们只能点击按钮一次。

      const App = () => {
  const [isLoading, setIsLoading] = React.useState(false);

  React.useEffect(() => {
    if (isLoading) {
      fetch('http://someAPI')
        .then(response => response.json())
        .then(success => {
          setIsLoading(false);
        })
        .catch(e => {
          setIsLoading(false);
        });
    }
  }, [isLoading]);

  const submitForm = () => {
    setIsLoading(true);
  };
  return (
    <form>
      <label htmlFor='name'>Name</label>
      <input id='name' />

      <label htmlFor='genre'>Favorite genre of music</label>
      <ToggleButtonGroup type='checkbox' name='genre'>
        <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton>
        <ToggleButton value={'jazz'}>Jazz</ToggleButton>
        <ToggleButton value={'country'}>Country</ToggleButton>
      </ToggleButtonGroup>

      <Button
        type='submit'
        disabled={isLoading}
        onClick={!isLoading ? submitForm : null}
      >
        Submit
      </Button>
    </form>
  );
};
    

样式按钮

Bootstrap 为您提供了许多默认按钮变体，包括primary、secondary和success。可以通过复制 node_modules /bootstrap/scss/_variables.scss并将副本放入您自己的src/代码中来更新这些变体的颜色和样式。在那里，您可以更新配色方案的 SCSS 变量以及按钮属性。

您可以使用size属性设置按钮的大小。可用选项为sm或lg。

      <ButtonToolbar>
  <Button variant='primary' size='sm'>
    Primary
  </Button>
  <Button variant='secondary' size='lg'>
    Secondary
  </Button>
</ButtonToolbar>
    

您还可以使用block属性将按钮设置为横跨其父级的整个宽度。该值为布尔值，默认为false。

      <ButtonToolbar>
  <Button variant='primary' block={true}>
    Primary
  </Button>
</ButtonToolbar>
    

这是 Bootstrap 附带的按钮变体的完整列表。

      <ButtonToolbar>
  <Button variant='primary'>Primary</Button>
  <Button variant='secondary'>Secondary</Button>
  <Button variant='success'>Success</Button>
  <Button variant='warning'>Warning</Button>
  <Button variant='danger'>Danger</Button>
  <Button variant='info'>Info</Button>
  <Button variant='light'>Light</Button>
  <Button variant='dark'>Dark</Button>
  <Button variant='link'>Link</Button>
  /* Outline version of the main variants */
  <Button variant='outline-primary'>Primary</Button>
  <Button variant='outline-secondary'>Secondary</Button>
  <Button variant='outline-success'>Success</Button>
  <Button variant='outline-warning'>Warning</Button>
  <Button variant='outline-danger'>Danger</Button>
  <Button variant='outline-info'>Info</Button>
  <Button variant='outline-light'>Light</Button>
  <Button variant='outline-dark'>Dark</Button>
</ButtonToolbar>
    

结论

在 React 应用程序中使用 Bootstrap 的按钮可为您提供一组强大的组件，可满足您的设计系统需求。React-bootstrap 提供易于使用的属性，用于为您的按钮设置样式和添加功能。如果您想查看有关 react-bootstrap 的更详细文档，请访问此处的文档。

感谢阅读😀

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

_查看原文

技术指南

React框架

阅读全文

使用 React-bootstrap 按钮

杭州电子商务研究院

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

import React from 'react'; import Button from 'react-bootstrap/Button'; import 'bootstrap/dist/css/bootstrap.min.css'; const App = () => { return ( <form> <label htmlFor='username'>Username</label> <input id='username' /> <Button type='submit'>Submit</Button> </form> ); };

import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'; import ToggleButton from 'react-bootstrap/ToggleButton'; const App = () => { return ( <form> <label htmlFor='name'>Name</label> <input id='name' /> <label htmlFor='genre'>Favorite genre of music</label> <ToggleButtonGroup type='checkbox' name='genre'> <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton> <ToggleButton value={'jazz'}>Jazz</ToggleButton> <ToggleButton value={'country'}>Country</ToggleButton> </ToggleButtonGroup> <Button type='submit'>Submit</Button> </form> ); };

const App = () => { return ( <form> <label htmlFor='name'>Name</label> <input id='name' /> <label htmlFor='genre'>Favorite genre of music</label> <ToggleButtonGroup type='checkbox' name='genre' defaultValue={['hip_hop', 'jazz']} > <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton> <ToggleButton value={'jazz'}>Jazz</ToggleButton> <ToggleButton value={'country'}>Country</ToggleButton> </ToggleButtonGroup> <Button type='submit'>Submit</Button> </form> ); };

const App = () => { return ( ... <ToggleButtonGroup type='radio' name='genre' defaultValue={['jazz']} > <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton> <ToggleButton value={'jazz'}>Jazz</ToggleButton> <ToggleButton value={'country'}>Country</ToggleButton> </ToggleButtonGroup> <Button type='submit'>Submit</Button> ... ); };

const App = () => { const [genre, setGenre] = React.useState(); const handleGenreChange = (selectedValue) => { setGenre(selectedValue) } return ( ... <ToggleButtonGroup type='checkbox' name='genre' value={genre} onChange={handleGenreChange} > <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton> <ToggleButton value={'jazz'}>Jazz</ToggleButton> <ToggleButton value={'country'}>Country</ToggleButton> </ToggleButtonGroup> <Button type='submit'>Submit</Button> ... ); };

<ButtonToolbar> <Button variant='primary'>Primary</Button> <Button variant='secondary'>Secondary</Button> <Button variant='success'>Success</Button> <Button variant='warning'>Warning</Button> <Button variant='danger'>Danger</Button> <Button variant='info'>Info</Button> <Button variant='light'>Light</Button> <Button variant='dark'>Dark</Button> <Button variant='link'>Link</Button> /* Outline version of the main variants */ <Button variant='outline-primary'>Primary</Button> <Button variant='outline-secondary'>Secondary</Button> <Button variant='outline-success'>Success</Button> <Button variant='outline-warning'>Warning</Button> <Button variant='outline-danger'>Danger</Button> <Button variant='outline-info'>Info</Button> <Button variant='outline-light'>Light</Button> <Button variant='outline-dark'>Dark</Button> </ButtonToolbar>