MeteorでReact-Bootstrapを使用してFormControlから値を取得する方法

Question

現在のMeteorプロジェクトでreact-bootstrapを使用しています。私はこのフォームを動作させるように見えません。私は間違って何をしていますか？私はFormControl入力の値を読み取ることができないようです。 "輸入/ UI /コンポーネント/アドオンspark.jsを：：61：：35予期しないトークン（35:61）は"

また、私のモーダルでは動作しません。私はこのエラーを取得しています現時点では

FormControlに 'ref = "city"'を追加すると、これ以上はありません。 はその後、私はこのエラーを取得する：私は私のモーダル作業に参照を取得するために管理している ：

UPDATE：「キャッチされない不変違反ステートレス機能コンポーネントがREFSすることはできません」。しかし、私はまだフォームから価値を得ることができません。 私は途方もなく多くの問題を引き起こしたクラスオブジェクトにすることを忘れました。今でも、私は別のエラーを取得しています：

「キャッチされない例外TypeError：未定義のプロパティを読み取ることができません 『cityInput』」

を私はこのように私の機能を追加しようとすると：

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

私のモーダルはもはや動作しません。

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

：これは私の現在のコードである

"未定義のプロパティを読み取ることができません 'バインド'（...） - spark.jsを追加します。：53キャッチされない例外TypeErrorを" ：私は、このエラーコードを取得します

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