react如何使用react-bootstrap-創(chuàng)新互聯(lián)

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屬性可以調(diào)整按鈕的狀態(tài)顏色：

Default
Primary
Success

下圖bsStyle屬性分別為：info、warning、danger、link

使用按鈕實(shí)現(xiàn)點(diǎn)擊loading，等待結(jié)果的功能：

點(diǎn)擊之后會(huì)變?yōu)閘oading...，可以自己點(diǎn)擊一下

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

 實(shí)現(xiàn)按鈕的下拉和上拉：

在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：可以取消它的點(diǎn)擊事件

表格： 

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

可以點(diǎn)擊隱藏的面板： 

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

  render() {
    return (
      

         this.setState({ open: !this.state.open })}>
          點(diǎn)我隱藏/顯示
        
        
          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

點(diǎn)擊彈出的窗口：

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