詳解react使用react-bootstrap當輪子造車

更新時間：2017年08月15日 09:38:48 作者：Tiey

本篇文章主要介紹了詳解react使用react-bootstrap當輪子造車，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

上一篇我們談了談如何配置react的webpack環(huán)境

可能很多人已經(jīng)打開過官方文檔學習了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

react-bootstrap官方網(wǎng)址

現(xiàn)在就讓我們來看看它能干什么吧！

一、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>

使用效果如下：

使用well將按鈕包裹起來，可以實現(xiàn)如下效果：（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屬性可以調整按鈕的狀態(tài)顏色：

<Button>Default</Button>
<Button s>Primary</Button>
<Button bsStyle="success">Success</Button>

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

使用按鈕實現(xiàn)點擊loading，等待結果的功能：

點擊之后會變?yōu)閘oading...，可以自己點擊一下

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

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

在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>

二、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：可以取消它的點擊事件

表格：

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

可以點擊隱藏的面板：

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

三、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>
      );
  }
}

以及點擊顯示、隱藏的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>
    );
  }
}

四、輪播

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

五、一些有用的圖標

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

六、表單

表單基礎的類函數(shù)為：

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"
        />

便可以輕松實現(xiàn)表單！如果你對react有了解，便知道原生的表單是不能直接用的。這個組件簡化了許多，但我沒用實際用過，所以不知道效果如何。

我寫的這些只是拋磚引玉，只是希望大家稍微了解到react-bootstrap大概能做的事

更詳細的方法和屬性請進入官方網(wǎng)址瀏覽文檔，打開源代碼自行研究

有些官方demo沒有給完全，可以運行前面的我給的demo，再查看源代碼理解（不過我也沒有寫全，而且結構比較亂）

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

React應用中使用Bootstrap的方法

react setupProxy.js導致項目無法啟動的解決
這篇文章主要介紹了react setupProxy.js導致項目無法啟動的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
react父組件調用子組件的方式匯總
在react中常用props實現(xiàn)子組件數(shù)據(jù)到父組件的傳遞,但是父組件調用子組件的功能卻不常用,下面這篇文章主要給大家介紹了關于react父組件調用子組件的相關資料,需要的朋友可以參考下
2022-08-08
React中的for循環(huán)解讀
這篇文章主要介紹了React中的for循環(huán)解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
詳解React setState數(shù)據(jù)更新機制
這篇文章主要介紹了React setState數(shù)據(jù)更新機制的相關資料，幫助大家更好的理解和學習使用React框架，感興趣的朋友可以了解下
2021-04-04
React中的Props類型校驗和默認值詳解
這篇文章主要為大家詳細介紹了React中的Props類型校驗和默認值，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
React-Native之TextInput組件的設置以及如何獲取輸入框的內容
這篇文章主要介紹了React-Native之TextInput組件的設置以及如何獲取輸入框的內容問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
使用store來優(yōu)化React組件的方法
這篇文章主要介紹了使用store來優(yōu)化React組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
基于React實現(xiàn)一個todo打勾效果
這篇文章主要為大家詳細介紹了如何基于React實現(xiàn)一個todo打勾效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-03-03
React為 Vue 引入容器組件和展示組件的教程詳解
這篇文章主要介紹了React為 Vue 引入容器組件和展示組件的教程詳解，文中很詳細的給大家介紹了使用容器組件的原因,需要的朋友可以參考下
2018-05-05
react18?hooks自定義移動端Popup彈窗組件RcPop
這篇文章主要介紹了react18?hooks自定義移動端Popup彈窗組件RcPop,react-popup?基于react18+hook自定義多功能彈框組件,整合了msg/alert/dialog/toast及android/ios彈窗效果,需要的朋友可以參考下
2023-08-08