详解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 相关文章推荐
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
原生js简单实现放大镜特效
May 16 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Python threading多线程编程实例
2014/09/18 Python
Python最基本的输入输出详解
2015/04/25 Python
python入门教程之识别验证码
2017/03/04 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
使用python模拟高斯分布例子
2019/12/09 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
大学生村官典型材料
2014/01/12 职场文书
优良学风班总结材料
2014/02/08 职场文书
《童年》教学反思
2014/02/18 职场文书
继承权公证书
2014/04/09 职场文书
小组口号大全
2014/06/09 职场文书
节水口号标语
2014/06/19 职场文书
实习生辞职信范文
2015/03/02 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
python_tkinter弹出对话框创建
2022/03/20 Python
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android