如何在 Meteor 中使用 React-Bootstrap 从 FormControl 获取值

Question

我在我当前的 Meteor 项目中使用 react-bootstrap。我似乎无法让这个表格工作。我究竟做错了什么？我似乎无法读取 FormControl 输入的值。

目前我收到此错误： “imports/ui/components/add-spark.js:35:61: 意外令牌 (35:61)”

当我将 'ref="city"' 添加到 FormControl 时，我的模式也不再起作用。 然后我得到这个错误：“Uncaught Invariant Violation: Stateless function components cannot have refs”

更新： 我已经设法让我的模态工作中的参考。但我仍然无法从表单中获得价值。 我当然忘了把它变成一个导致很多问题的类对象。现在我得到了一个不同的错误：

"Uncaught TypeError: Cannot read property 'cityInput' of undefined"

当我尝试像这样添加我的功能时：

<form onSubmit={ this.handleInsertSpark.bind(this) }>

我的模态不再起作用了。然后我得到这个错误代码： “add-spark.js:53 Uncaught TypeError: Cannot read property 'bind' of undefined(...)”

这是我当前的代码：

const handleInsertSpark = (event) => {
  event.preventDefault();

  var city = ReactDOM.findDOMNode(this.refs.cityInput).value
  console.log(city);

};

function FieldGroup({ id, label, help, ...props }) {
  return (
    <FormGroup controlId={id}>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} />
      {help && <HelpBlock>{help}</HelpBlock>}
    </FormGroup>
  );
}

export default class AddSpark extends Component {
  render() {
    return (<div>
  <form onSubmit={ handleInsertSpark }>
    <FormGroup controlId="formControlsCity">
      <ControlLabel>Select your city</ControlLabel>
      <FormControl componentClass="select" placeholder="Choose your city" ref="cityInput" onClick={ moreOptions }>
        <option value="select">Choose your city</option>
        <option value="0">Beijing</option>
        <option value="1">Shanghai</option>
        <option value="2">Chengdu & Chongqing</option>
      </FormControl>
    </FormGroup>

<FormGroup controlId="formControlsPerson">
      <ControlLabel>Select your person</ControlLabel>
      <FormControl componentClass="select" placeholder="Choose your person">
        <option value="select">First select your city</option>
      </FormControl>
    </FormGroup>

<FormGroup controlId="formControlsLocation">
      <ControlLabel>Select your location</ControlLabel>
      <FormControl componentClass="select" placeholder="Choose your location">
        <option value="select">First select your city</option>
      </FormControl>
    </FormGroup>


    <FieldGroup
      id="formControlsText"
      type="text"
      label="Title"
      placeholder="Enter your title"
    />
    
    <FormGroup controlId="formControlsTextarea">
      <ControlLabel>Content</ControlLabel>
      <FormControl componentClass="textarea" placeholder="textarea" />
    </FormGroup>

    <div className="upload-area">
        <p className="alert alert-success text-center">
          <span>Click or Drag an Image Here to Upload</span>
          <input type="file" onChange={this.uploadFile} />
        </p>
    </div>

    <Button
      type="submit">
      Submit
    </Button>
  </form>
  </div>
  )}
  }

Answer 1

我通过再次阅读 React 文档自己解决了这个问题。似乎我只是没有按照预期的方式使用 React。

这是我的代码，它可以正常工作并执行我想要它做的事情：

function FieldGroup({ id, label, help, ...props }) {
  return (
    <FormGroup controlId={id}>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} />
      {help && <HelpBlock>{help}</HelpBlock>}
    </FormGroup>
  );
}

export default class AddSpark extends Component {
   constructor(props){
    super(props)
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Text field value is: ' + this.state.value);
  }

  render() {
    return (<div>
  <form >
    <FormGroup controlId="formControlsCity">
      <ControlLabel>Select your city</ControlLabel>
      <FormControl componentClass="select" placeholder="Choose your city" onClick={ moreOptions } value={this.state.value} onChange={this.handleChange} >
        <option value="select">Choose your city</option>
        <option value="Beijing">Beijing</option>
        <option value="Shanghai">Shanghai</option>
        <option value="Chengdu & Chongqing">Chengdu & Chongqing</option>
      </FormControl>
    </FormGroup>

<FormGroup controlId="formControlsPerson">
      <ControlLabel>Select your person</ControlLabel>
      <FormControl componentClass="select" placeholder="Choose your person">
        <option value="select">First select your city</option>
      </FormControl>
    </FormGroup>

<FormGroup controlId="formControlsLocation">
      <ControlLabel>Select your location</ControlLabel>
      <FormControl componentClass="select" placeholder="Choose your location">
        <option value="select">First select your city</option>
      </FormControl>
    </FormGroup>


    <FieldGroup
      id="formControlsText"
      type="text"
      label="Title"
      placeholder="Enter your title"
    />
    
    <FormGroup controlId="formControlsTextarea">
      <ControlLabel>Content</ControlLabel>
      <FormControl componentClass="textarea" placeholder="textarea" />
    </FormGroup>

    <div className="upload-area">
        <p className="alert alert-success text-center">
          <span>Click or Drag an Image Here to Upload</span>
          <input type="file" onChange={this.uploadFile} />
        </p>
    </div>

    <Button
      onClick={this.handleSubmit}>
      Submit
    </Button>
  </form>
  </div>
  )}
  }