Question

我很陌生，所以这可能是一件非常容易的事情。我目前正在研究一个Modal组件（来自ReactBootstrap），我在Modal对话框组件中使用了一个react-bootstrap Input组件，type=email。这样，当在<form>元素内部并且提交表单时将触发验证，并且如果验证失败，则在输入组件的顶部显示popoup类型消息。但是，我没有在<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文件以获取其他功能。

Answer 2

您的onClick事件已连接到handleSubmit()，看起来没问题。

通过this.refs.theInput.getDOMNode().value访问电子邮件值是否无效{？1}}？

如果是这样，我想知道ReactBootstrap的handleSubmit()是否将原生DOM <Input>包装在其他一些元素中;您可能必须导航DOM树才能到达实际的<input>以获取电子邮件值。

Answer 3

就像彼得提到的那样，我不得不走近目标。

在我的组件的渲染功能中;

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

在我的handleSubmit函数中;

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

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

3 个答案: