React-Bootstrap模態表單條目

我目前有一個React Bootstrap模式，當打開時顯示一些輸入。我希望用戶能夠在輸入中輸入值，然後使用「保存」按鈕，只需創建JSON對象並通過控制檯記錄新創建的JSON對象。React-Bootstrap模態表單條目

closeModal(){ 
    this.setState({ 
     showModal: false, 
    }); 
} 

openModal(){ 
    this.setState({ 
     showModal: true, 
    }); 
} 

saveSandbox(event){ 
    console.log("Hello World"); 
    name: this.refs.bundleName.findDOMNode().value; 
    console.log(name); 
} 
<Modal show={this.state.showModal} onHide={this.closeModal.bind(this)}> 
    <form> 
     <Modal.Header closeButton> 
      <Modal.Title>Create New</Modal.Title> 
      <Input type="text" ref="bundleName" placeholder="Name" /> 
     </Modal.Header> 
     <Modal.Body > 
      <h4>Type: </h4> 

       <Input type="select" placeholder="select"> 
        {bundleTypes.map(({type}, index) => 
         <option value="select">{type}</option> 
        )} 
       </Input> 

        <h4>Description: </h4> 
        <Input type="text" placeholder="Enter text"}/> 
        <hr /> 

     </Modal.Body> 
     <Modal.Footer> 
      <Button onClick={this.saveSandbox.bind(this)} bsStyle="success">Save</Button> 
      <Button onClick={this.closeModal.bind(this)} >Close</Button> 
     </Modal.Footer> 
    </form> 
</Modal>

這是目前我的代碼，但是當Chrome瀏覽器，它報告Uncaught TypeError: this.refs.bundleName.findDOMNode is not a function

當實例或其他問題尋找/回答現在提出的建議已被棄用。

來源

2016-02-04 tmhn

你可以試試這個'React.findDOMNode（this.refs.bundleName）'？ –

With React v0.14它很簡單。以下代碼 - this.refs.bundleName是實際的DOM節點。您不必調用this.refs.bundleName.getDOMNode()即可獲取底層DOM節點。

來源

2016-02-04 09:38:54 WitVault

謝謝你的工作正確，然後我使用'.getValue（）'，它按預期工作 – tmhn

React-Bootstrap模態表單條目

回答

相關問題