反应引导表单不在文本输入中呈现空格

Question

我正在使用 react 引导组件。我有遵循这种结构的表单元素：

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”

我似乎找不到答案。

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

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

Answer 1

import React, { Component } from 'react';
import { render } from 'react-dom';
import { FormGroup, ControlLabel,  FormControl } from 'react-bootstrap'
class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: ''
    }
    this.handleChange = this.handleChange.bind(this)
  }

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

  render () {
    return (
      <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>
    )
  }
}

render(<App />, document.getElementById('root'));