Twitter bootstrap 以编程方式触发React引导输入组件验证

我是个新手，所以这可能是一件很容易的事情。我目前正在使用一个模态组件（来自ReactBootstrap），并且在模态对话框组件中使用react bootstrap输入组件，带有

type=email

。当在

元素中并提交表单时，将触发验证，如果验证失败，则在输入组件顶部显示一条popoup类型消息。但是，我没有在

元素中使用此组件，我希望在单击按钮时触发此组件。这是我的一段代码，代表了这个问题：

/** @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')
);

/**@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（）{
//我想在这里触发电子邮件输入验证
//通过this.refs.theInput
},
render:function（）{
返回(
发送
接近
);
}
});
var App=React.createClass({
render:function（）{
返回(
触发模式
);
}
});
React.render（，
document.getElementById（'content'）
);

您的

onClick

事件已连接到

handleSubmit（）

，看起来正常

通过

this.refs.theInput.getDOMNode（）.value

访问电子邮件值是否在

handleSubmit（）中不起作用

如果是这样，我想知道ReactBootstrap的
是否在其他元素中包装了本机DOM
；您可能需要导航DOM树才能到达实际的
，从中获取电子邮件值。
就像Peter提到的，我必须遍历对象很远

在我的组件的渲染函数中

render: function() {
  return (
    <form onSubmit={this.handleSubmit}>
      <Input ref='gameTitle' type='text' buttonAfter={<Button type="submit">Save</Button>} />
    </form>
  );
}

handleSubmit: function() {
  console.log(this.refs.gameTitle.refs.input.getDOMNode().value);
}

直接对输入调用
getValue（）
函数

this.refs.theInput.getValue（）
应返回您的
输入值

如果可以避免，请不要使用
getDOMNode（）
，因为它假定基础DOM实现在将来的版本中不会更改。查看react bootstrap Input.jsx文件了解其他函数