React-Bootstrap 模态表单条目

Question

我目前有一个 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

在查看示例或其他问题/答案时，建议现已弃用。

Answer 1

使用 React v0.14 很简单。 以下代码 - this.refs.bundleName 是实际的 DOM 节点。 您不必调用this.refs.bundleName.getDOMNode() 来获取底层DOM 节点。