react如何使用react-bootstrap-创新互联

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

          Large button
          Large button
        
        
          Default button
          Default button
        
        
          Small button
          Small button
        
        
          Extra small button
          Extra small button
        

   Block level button
   Block level button

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

Default
Primary
Success

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

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

点击之后会变为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 (
      
        {isLoading ? 'Loading...' : 'Loading state'}
      
    );
  }
}

 实现按钮的下拉和上拉：

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

//下拉

  1
  2
  
     Dropdown link
     Dropdown link
  


//上拉

  
    Action
    Another action
    Something else here
    
    Separated link
  

二、List

简单列表：

          Link 1
          Link 2
          Link 3
        

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

• active：已选中

• disable：可以取消它的点击事件

表格： 

　　　　　　
          
          
            #
            First Name
            Last Name
            Username
          
          
          
          
            1
            Mark
            Otto
            @mdo
          
          
            2
            Jacob
            Thornton
            @fat
          
          
            3
            Larry the Bird
            @twitter
          
          
        

可以点击隐藏的面板： 

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

  render() {
    return (
      

         this.setState({ open: !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.
        
      
    );
  }
}

三、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 (
        

          
            弹出框
          
          
            
              
                Modal title
              

              
                One fine body...
              

              
                Close
                Save changes