Question

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

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

当我向FormControl添加'ref =“city”'时，我的模态也不再起作用了。然后我收到这个错误：“Uncaught Invariant Violation：无状态函数组件不能有refs”

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

“未捕获的TypeError：无法读取未定义的属性'cityInput'”

当我尝试添加我的功能时：

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

我的模态不再适用了。然后我得到这个错误代码： “add-spark.js：53 Uncaught TypeError：无法读取未定义的属性'bind'（...）”

这是我目前的代码：

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

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

1 个答案: