详解react使用react-bootstrap当轮子造车


Posted in Javascript onAugust 15, 2017

上一篇我们谈了谈如何配置react的webpack环境

可能很多人已经打开过官方文档学习了react的基础知识

不管有没有,在介绍react之前,我想先介绍一下react-bootstrap

先懂得使用别人造的轮子,就能更快成为老司机。

好的,源代码奉上:

git clone https://github.com/lingjiawen/react_bootstrap_demo.git
cd react_bootstrap_demo
npm install
npm run dev

打开浏览器输入:localhost:8080

 react-bootstrap官方网址

现在就让我们来看看它能干什么吧!

一、Button

使用Button声明一个按钮,bsSize有如下四个属性,可以分别有大、中、小、超小四种大小的按钮,再用ButtonToolbar包裹起来

<ButtonToolbar>
          <Button bsStyle="primary" bsSize="large">Large button</Button>
          <Button bsSize="large">Large button</Button>
        </ButtonToolbar>
        <ButtonToolbar>
          <Button bsStyle="primary">Default button</Button>
          <Button>Default button</Button>
        </ButtonToolbar>
        <ButtonToolbar>
          <Button bsStyle="primary" bsSize="small">Small button</Button>
          <Button bsSize="small">Small button</Button>
        </ButtonToolbar>
        <ButtonToolbar>
          <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
          <Button bsSize="xsmall">Extra small button</Button>
        </ButtonToolbar>

使用效果如下:

详解react使用react-bootstrap当轮子造车

使用well将按钮包裹起来,可以实现如下效果:(well在后面介绍)

<div className="well" style={wellStyles}>
   <Button bsStyle="primary" bsSize="large" block>Block level button</Button>
   <Button bsSize="large" block>Block level button</Button>
</div>

使用 bsStyle属性可以调整按钮的状态颜色:

详解react使用react-bootstrap当轮子造车

<Button>Default</Button>
<Button s>Primary</Button>
<Button bsStyle="success">Success</Button>

下图bsStyle属性分别为:info、warning、danger、link

详解react使用react-bootstrap当轮子造车

使用按钮实现点击loading,等待结果的功能:

详解react使用react-bootstrap当轮子造车

点击之后会变为loading...,可以自己点击一下

class LoadingButton extends React.Component{
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = { isLoading: false }
  }

  handleClick() {
    this.setState({isLoading: true});

    // This probably where you would have an `ajax` call
    setTimeout(() => {
      // Completed of async action, set loading state back
      this.setState({isLoading: false});
    }, 2000);
  }

  render() {
    let isLoading = this.state.isLoading;
    return (
      <Button
        bsStyle="primary"
        disabled={isLoading}
        onClick={!isLoading ? this.handleClick : null}>
        {isLoading ? 'Loading...' : 'Loading state'}
      </Button>
    );
  }
}

 实现按钮的下拉和上拉:

在title中使用Dropdown属性,用DropdownButton包裹下拉,使用Dropup为上拉

//下拉
<ButtonGroup>
  <Button>1</Button>
  <Button>2</Button>
  <DropdownButton title="Dropdown" id="bg-nested-dropdown">
     <MenuItem eventKey="1">Dropdown link</MenuItem>
     <MenuItem eventKey="2">Dropdown link</MenuItem>
  </DropdownButton>
</ButtonGroup>

//上拉
<ButtonToolbar>
  <SplitButton title="Dropup" dropup id="split-button-dropup">
    <MenuItem eventKey="1">Action</MenuItem>
    <MenuItem eventKey="2">Another action</MenuItem>
    <MenuItem eventKey="3">Something else here</MenuItem>
    <MenuItem divider />
    <MenuItem eventKey="4">Separated link</MenuItem>
  </SplitButton>
</ButtonToolbar>

详解react使用react-bootstrap当轮子造车

二、List

简单列表:

<ListGroup>
          <ListGroupItem href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" active>Link 1</ListGroupItem>
          <ListGroupItem href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link 2</ListGroupItem>
          <ListGroupItem href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" disabled>Link 3</ListGroupItem>
        </ListGroup>

使用ListGroup包裹, ListGroupItem就是它的子元素

  • active:已选中
  • disable:可以取消它的点击事件

详解react使用react-bootstrap当轮子造车

表格: 

<Table striped bordered condensed hover>
          <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
          </tbody>
        </Table>

详解react使用react-bootstrap当轮子造车

可以点击隐藏的面板: 

class CollapsiblePanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: true
    };
  }

  render() {
    return (
      <div>
        <Button onClick={ ()=> this.setState({ open: !this.state.open })}>
          点我隐藏/显示
        </Button>
        <Panel collapsible expanded={this.state.open}>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
          Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </Panel>
      </div>
    );
  }
}

详解react使用react-bootstrap当轮子造车

三、Overlays

点击弹出的窗口:

class StaticMarkup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {dpName:false};
    this.onDisplayOverlays = this.onDisplayOverlays.bind(this);
    this.onCloseOverlays = this.onCloseOverlays.bind(this);
  }


  onDisplayOverlays() {
    this.setState({
      dpName:true
    });
  }

  onCloseOverlays() {
    this.setState({
      dpName:false
    });
  }

  render() {
    if(this.state.dpName)
      return (
        <div>
          <Button
            bsStyle="primary"
            onClick={this.onDisplayOverlays}>
            弹出框
          </Button>
          <div className="static-modal" id="static_modal">
            <Modal.Dialog>
              <Modal.Header>
                <Modal.Title>Modal title</Modal.Title>
              </Modal.Header>

              <Modal.Body>
                One fine body...
              </Modal.Body>

              <Modal.Footer>
                <Button onClick={this.onCloseOverlays}>Close</Button>
                <Button bsStyle="primary">Save changes</Button>
              </Modal.Footer>

            </Modal.Dialog>
          </div>
        </div>
      );
    else
      return (
        <div>
          <Button
            bsStyle="primary"
            onClick={this.onDisplayOverlays}>
            弹出框
          </Button>
        </div>
      );
  }
}

详解react使用react-bootstrap当轮子造车

以及点击显示、隐藏的overload

class CustomOverlays extends React.Component{
  constructor(props) {
    super(props);
    this.state = {show: true};
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.setState({ show: !this.state.show });
  }

  render() {
    const sharedProps = {
      show: this.state.show,
      container: this,
      target: () => ReactDOM.findDOMNode(this.refs.target)
    };

    return (
      <div style={{ height: 100, paddingLeft: 150, position: 'relative' }}>
        <Button ref="target" onClick={this.toggle}>
          Click me!
        </Button>

        <Overlay {...sharedProps} placement="left">
          <Tooltip id="overload-left">Tooltip overload!</Tooltip>
        </Overlay>
        <Overlay {...sharedProps} placement="top">
          <Tooltip id="overload-top">Tooltip overload!</Tooltip>
        </Overlay>
        <Overlay {...sharedProps} placement="right">
          <Tooltip id="overload-right">Tooltip overload!</Tooltip>
        </Overlay>
        <Overlay {...sharedProps} placement="bottom">
          <Tooltip id="overload-bottom">Tooltip overload!</Tooltip>
        </Overlay>
      </div>
    );
  }
}

详解react使用react-bootstrap当轮子造车 

四、轮播

class CarouselInstance extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Carousel>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="http://123.207.238.196/bridge.jpg"/>
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="http://123.207.238.196/bridge.jpg"/>
          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="http://123.207.238.196/bridge.jpg"/>
          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    );
  }
}

详解react使用react-bootstrap当轮子造车

五、一些有用的图标

class MiscellaneousInstance extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <div>
          <ButtonToolbar>
            <ButtonGroup>
              <Button><Glyphicon glyph="align-left" /></Button>
              <Button><Glyphicon glyph="align-center" /></Button>
              <Button><Glyphicon glyph="align-right" /></Button>
              <Button><Glyphicon glyph="align-justify" /></Button>
            </ButtonGroup>
          </ButtonToolbar>
          <ButtonToolbar>
            <ButtonGroup>
              <Button bsSize="large"><Glyphicon glyph="star" /> Star</Button>
              <Button><Glyphicon glyph="star" /> Star</Button>
              <Button bsSize="small"><Glyphicon glyph="star" /> Star</Button>
              <Button bsSize="xsmall"><Glyphicon glyph="star" /> Star</Button>
            </ButtonGroup>
          </ButtonToolbar>
        </div>
        <div>
          <h1>Label <Label>New</Label></h1>
          <h2>Label <Label>New</Label></h2>
          <h3>Label <Label>New</Label></h3>
          <h4>Label <Label>New</Label></h4>
          <h5>Label <Label>New</Label></h5>
          <p>Label <Label>New</Label></p>
        </div>
      </div>
    );
  }
}

详解react使用react-bootstrap当轮子造车

六、表单

表单基础的类函数为:

function FieldGroup({ id, label, help, props }) {
  return (
    <FormGroup controlId={id}>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} />
      {help && <HelpBlock>{help}</HelpBlock>}
    </FormGroup>
  );
}

然后使用FieldGroup包裹:

<FieldGroup
          id="formControlsText"
          type="text"
          label="Text"
          placeholder="Enter text"
        />

便可以轻松实现表单!如果你对react有了解,便知道原生的表单是不能直接用的。这个组件简化了许多,但我没用实际用过,所以不知道效果如何。

详解react使用react-bootstrap当轮子造车

我写的这些只是抛砖引玉,只是希望大家稍微了解到react-bootstrap大概能做的事

更详细的方法和属性请进入官方网址浏览文档,打开源代码自行研究

有些官方demo没有给完全,可以运行前面的我给的demo,再查看源代码理解(不过我也没有写全,而且结构比较乱)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
载入进度条 效果
Jul 08 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
使用Ajax实现无刷新上传文件
Apr 12 Javascript
JScript实现表格的简单操作
Aug 15 #Javascript
AngularJS日程表案例详解
Aug 15 #Javascript
jQuery实现菜单栏导航效果
Aug 15 #jQuery
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 #Javascript
JScript实现地址选择功能
Aug 15 #Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 #jQuery
关于vue.js发布后路径引用的问题解决
Aug 15 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php实现session共享的实例方法
2019/09/19 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
javascript实现2048游戏示例
2014/05/04 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
详解node中创建服务进程
2017/05/09 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
vue实现购物车案例
2020/05/30 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python向excel中写入数据的方法
2019/05/05 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
numpy 声明空数组详解
2019/12/05 Python
Django实现内容缓存实例方法
2020/06/30 Python
函授本科自我鉴定
2013/11/03 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
中学生自我评价范文
2014/02/08 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
小学老师寄语大全
2014/04/04 职场文书
临床医师个人自我评价
2014/04/06 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
婚庆主持词大全
2015/06/30 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
创业计划书之校园超市
2019/09/12 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python