如何使用Meteor中的React-Bootstrap從FormControl獲取值

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：無法讀取undefined（...）的屬性'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> )} }