欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解react使用react-bootstrap当*造车

程序员文章站 2022-05-26 08:16:54
上一篇我们谈了谈如何配置react的webpack环境 可能很多人已经打开过官方文档学习了react的基础知识 不管有没有,在介绍react之前,我想先介绍一下re...

上一篇我们谈了谈如何配置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

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

一、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,再查看源代码理解(不过我也没有写全,而且结构比较乱)

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