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

发布时间：2020-12-18 00:35:15 所属栏目：安全来源：网络整理

导读：上一篇我们谈了谈如何配置react的webpack环境可能很多人已经打开过官方文档学习了react的基础知识不管有没有，在介绍react之前，我想先介绍一下react-bootstrap 先懂得使用别人造的轮子，就能更快成为老司机。好的，源代码奉上：打开浏览器输入：localho

First Name	Last Name	Username
上一篇我们谈了谈如何配置react的webpack环境可能很多人已经打开过官方文档学习了react的基础知识不管有没有，在介绍react之前，我想先介绍一下react-bootstrap 先懂得使用别人造的轮子，就能更快成为老司机。好的，源代码奉上：打开浏览器输入：localhost:8080 react-bootstrap官方网址现在就让我们来看看它能干什么吧！一、Button 使用Button声明一个按钮，bsSize有如下四个属性，可以分别有大、中、小、超小四种大小的按钮，再用ButtonToolbar包裹起来使用效果如下：使用well将按钮包裹起来，可以实现如下效果：（well在后面介绍）使用 bsStyle属性可以调整按钮的状态颜色： Default 下图bsStyle属性分别为：info、warning、danger、link 使用按钮实现点击loading，等待结果的功能：点击之后会变为loading...，可以自己点击一下 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'} ); } } 实现按钮的下拉和上拉：在title中使用Dropdown属性，用DropdownButton包裹下拉,使用Dropup为上拉 //上拉二、List 简单列表： Link 1 Link 2 Link 3 使用ListGroup包裹， ListGroupItem就是它的子元素 active：已选中 disable：可以取消它的点击事件表格：

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

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

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

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

好的，源代码奉上：

打开浏览器输入：localhost:8080

react-bootstrap官方网址

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

一、Button

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

使用效果如下：

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

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

Default

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

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

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

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

); } }

实现按钮的下拉和上拉：

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

//上拉

二、List

简单列表：

Link 1 Link 2 Link 3

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

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

表格：

First Name Last Name Username

可以点击隐藏的面板：

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.

); } }

三、Overlays

点击弹出的窗口：

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>
  );

}
}

以及点击显示、隐藏的overload

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!</Tooltip>
    </Overlay>
    <Overlay {...sharedProps} placement="top"&gt;
      <Tooltip id="overload-top"&gt;Tooltip overload!</Tooltip>
    </Overlay>
    <Overlay {...sharedProps} placement="right"&gt;
      <Tooltip id="overload-right"&gt;Tooltip overload!</Tooltip>
    </Overlay>
    <Overlay {...sharedProps} placement="bottom"&gt;
      <Tooltip id="overload-bottom"&gt;Tooltip overload!</Tooltip>
    </Overlay>
  </div>
);

}
}