ModalRepoForm.js

import React from 'react'
import { Modal, Button } from 'react-bootstrap'
import autobind from 'autobind-decorator'
import { observer, inject } from 'mobx-react';

@inject(["modalRepoFormStore"])
@inject(["headerStore"])
@observer
@autobind
export default class ModalRepoForm extends React.Component {
  get store() {
    return this.props.modalRepoFormStore
  }

  close() {
    this.store.close();
  }

  open() {
    this.store.open();
  }

  handleChange(e) {
    this.store.handleChange(e);
  }

  save(e) {
    this.store.save(e, this.refs.name, this.props.headerStore)
  }

  render() {
    return (
      <div className='col-md-2'>
        <Button
          bsStyle="primary"
          bsSize="small"
          onClick={this.open}
        >
          新建仓库
        </Button>

        <Modal backdrop='static' show={this.store.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title>新建仓库</Modal.Title>
          </Modal.Header>
          <Modal.Body className='clearfix'>
            <form className='form-horizontal'>
              <label htmlFor="formHorizontalName" className="col-sm-2 control-label">仓库名</label>
              <div className="col-sm-5">
                <input autoFocus type="text" id="formHorizontalName" className="form-control" ref='name' value={ this.store.name } onChange={ this.handleChange } />
                {function(){
                  if (this.store.showNameError) {
                    return <p className="text-danger">仓库名不能为空</p>
                  }
                }.call(this)}
              </div>
            </form>
          </Modal.Body>
          <Modal.Footer>
            <Button bsStyle="primary" onClick={this.save}>保存</Button>
            <Button onClick={this.close}>关闭</Button>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }
}