twitter-bootstrap - 以编程方式触发 React-Bootstrap 输入组件验证

Question

我对 react 还很陌生，所以这可能是一件很容易做的事情。我目前正在开发一个模态组件(来自ReactBootstrap)，并且我在模态对话框组件中使用react-bootstrap输入组件，带有 type=email 。这，当在 <form> 内时元素和提交的表单将触发验证，如果验证失败，则会在输入组件顶部显示弹出类型消息。但是，我没有在 <form> 中使用此组件。元素并希望在单击按钮时触发此元素。这是我的一段工作代码，它代表了这个问题:

/** @jsx React.DOM */

var Modal = ReactBootstrap.Modal;
var ModalTrigger = ReactBootstrap.ModalTrigger;
var Button = ReactBootstrap.Button;
var Input = ReactBootstrap.Input;

var TheModal = React.createClass({
    handleSubmit: function() {
        // I want to trigger the email input validation here
        // via this.refs.theInput
    },
    render: function() {
        return (
            <Modal {...this.props} title="Modal Title" animation={true} closeButton={false}>
                <div className="modal-body">
                    <Input ref="theInput" type="email" label="Email Address" defaultValue="Enter email" />
                </div>

                <div className="modal-footer">
                    <Button bsStyle="primary" onClick={this.handleSubmit}>Send</Button>
                    <Button bsStyle="danger" onClick={this.props.onRequestHide}>Close</Button>

                </div>
            </Modal>
        );
    }
});

var App = React.createClass({
    render: function() {
        return (
            <div>
                <ModalTrigger modal={<TheModal />}>
                    <Button bsStyle="primary" bsSize="large">Trigger Modal</Button>
                </ModalTrigger>
            </div>
        );
    }
});

React.render( <App />,
    document.getElementById('content')
);

Answer 1

直接在输入上调用 getValue() 函数。

this.refs.theInput.getValue() 应该返回您的 theInput 值。

如果可以避免，请不要使用 getDOMNode()，因为它假定底层 DOM 实现在未来版本中不会更改。其他功能请查看react-bootstrap Input.jsx 文件。