React bootstrap表单不在文本输入中呈现空格

Question

我正在使用反应引导程序组件。我有表单元素遵循这种结构：

class Example extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      name: '',
      show: false
    }
    this.handleChange = this.handleChange.bind(this)
    this.handleShow = this.handleShow.bind(this)
    this.handleClose = this.handleClose.bind(this)
  }

  handleShow () {
    this.setState({ show: true })
  }

  handleClose () {
    this.setState({ show: false })
  }

  handleChange (e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  render () {
    return (
  <div>
    <Button bsStyle='success' onClick={this.handleShow}>Add New</Button>
    <Modal show={this.state.show} onHide={this.handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Add New</Modal.Title>
      </Modal.Header>
      <Modal.Body>
      <form>
        <FormGroup>
          <ControlLabel className='form-input'>1. Provide Name</ControlLabel>
          <FormControl onChange={this.handleChange} className='form-input' type='text' placeholder='Name' name='name' value={this.state.name} />
        </FormGroup>
      </form>
      </Modal.Body>
    </Modal>
  </div>
    )
  }
}

当我输入文本输入时，它会移除空格，例如我键入'hello world'但它呈现'helloworld'

我似乎无法找到答案。

编辑：我忘了提到表单是在bootstrap模式中呈现的，我不知道这是不是导致问题的原因？我刚刚重构了我的代码并更新了我的示例代码段以匹配。

问题解决了：当我们将按钮分开时，问题就解决了，因此按钮不是组件的一部分，我们只返回模态。