频道导航

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

2019-01-07 Bootstrap 前端之家

前端之家收集整理的这篇文章主要介绍了详解react使用react-bootstrap当轮子造车，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

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

好的，源代码奉上：

打开浏览器输入：localhost:8080

react-bootstrap官方网址@H_403_1@

现在就让我们来看看它能干什么吧！@H_403_1@

一、Button

@H_403_1@

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

使用效果如下：@H_403_1@

@H_403_1@@H_403_1@

使用well将按钮包裹起来，可以实现如下效果：（well在后面介绍）@H_403_1@

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

@H_403_1@@H_403_1@

Default

下图bsStyle属性分别为：info、warning、danger、link@H_403_1@

@H_403_1@@H_403_1@

使用按钮实现点击loading，等待结果的功能：@H_403_1@

@H_403_1@@H_403_1@

点击之后会变为loading...，可以自己点击一下@H_403_1@

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'}

); } }

实现按钮的下拉和上拉：

@H_403_1@

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

//上拉

@H_403_1@@H_403_1@

二、List

@H_403_1@

简单列表：@H_403_1@

Link 1 Link 2 Link 3

使用ListGroup包裹， ListGroupItem就是它的子元素@H_403_1@

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

@H_403_1@@H_403_1@

表格：@H_403_1@

# First Name Last Name Username

@H_404_158@@H_403_1@@H_403_1@

可以点击隐藏的面板：@H_403_1@

render() {
return (

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.

); } }

@H_403_1@@H_403_1@

三、Overlays

@H_403_1@

点击弹出的窗口：@H_403_1@

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 (

Modal title

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

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

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

}
}

@H_403_1@@H_403_1@

以及点击显示、隐藏的overload@H_403_1@

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"&gt;
      <Tooltip id="overload-left"&gt;Tooltip overload!@H_<a href="/tag/403/" target="_blank" class="keywords">403</a>_217@
    </Overlay>
    <Overlay {...sharedProps} placement="top"&gt;
      <Tooltip id="overload-top"&gt;Tooltip overload!@H_<a href="/tag/403/" target="_blank" class="keywords">403</a>_217@
    </Overlay>
    <Overlay {...sharedProps} placement="right"&gt;
      <Tooltip id="overload-right"&gt;Tooltip overload!@H_<a href="/tag/403/" target="_blank" class="keywords">403</a>_217@
    </Overlay>
    <Overlay {...sharedProps} placement="bottom"&gt;
      <Tooltip id="overload-bottom"&gt;Tooltip overload!@H_<a href="/tag/403/" target="_blank" class="keywords">403</a>_217@
    </Overlay>
  </div>
);

}
}

@H_403_1@@H_403_1@