我目前有一个React Bootstrap模式,打开时会显示许多输入。我希望用户能够在输入中输入值,然后使用“保存”按钮,只需创建一个JSON对象并控制台记录新创建的JSON对象。
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
在查看示例或其他问题/答案时,建议现已弃用。
答案 0 :(得分:1)
使用 React v0.14 ,这是直截了当的。
以下代码 - this.refs.bundleName
是实际的DOM节点。
您不必调用this.refs.bundleName.getDOMNode()
来获取底层DOM节点。