如何從流星中的React-Bootstrap中獲取FormControl的值

我在我當前的Meteor項目中使用react-bootstrap。我似乎無法獲得此表單的工作。我究竟做錯了什麼？我似乎無法讀取FormControl輸入的值。如何從流星中的React-Bootstrap中獲取FormControl的值

在我收到此錯誤的時刻：「進口/ UI /組件/插件spark.js：35：61：意外的標記（35:61）」

而且我的模式行不通當我將'ref ='city''添加到FormControl時。然後我得到這個錯誤：「Uncaught不變的違規：無狀態功能組件不能有參考」

更新：我已經設法讓我的模態工作。但是我仍然無法從形式中獲得價值。我當然忘了把它變成一個造成很多問題的類對象。現在我雖然得到一個不同的錯誤：

「遺漏的類型錯誤：無法讀取屬性未定義‘cityInput’」

當我嘗試添加自己的功能是這樣的：

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

我的模態將不再工作。然後我得到這個錯誤代碼：「附加spark.js：53遺漏的類型錯誤：無法讀取的未定義的屬性‘綁定’（......）」

這是我當前的代碼：

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

來源

2016-10-26 Deelux

你已經改變了很多原來的問題，而且它似乎是不一致的此時此刻。在當前可用的代碼中想到的一件事是'handleInsertSpark'是一個箭頭函數，而不是一個類方法，這意味着它在詞法上與'this'（可能是全局對象）綁定，而不是對象本身。解決這個問題後，你能製作一個簡短的，自包含的版本來證明你的問題嗎？ – MasterAM

感謝您花時間寫回復。在做了一些我自己的閱讀之後，我終於發現我完全錯了。現在想出來。 Thnk – Deelux

我設法通過再次閱讀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> 
 
)} 
 
    }

來源

2016-10-31 14:18:05 Deelux

如何從流星中的React-Bootstrap中獲取FormControl的值

回答

相關問題