3

我对反应很陌生，所以这可能是一件很容易做到的事情。我目前正在开发一个模态组件（来自 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')
);
4

3 回答 3

3

getValue()直接在 Input 上调用该函数。

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

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

于 2015-03-19T18:57:21.183 回答
0

就像彼得提到的那样，我必须将物体穿过很远。

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

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);
}
于 2015-03-13T01:26:40.937 回答
0

您的onClick事件已连接到handleSubmit()，看起来不错。

this.refs.theInput.getDOMNode().value通过无法访问电子邮件值是否有效handleSubmit()？

如果是这样，我想知道 ReactBootstrap<Input>是否将本机 DOM 包装<input>在其他一些元素中；您可能必须浏览 DOM 树才能到达实际<input>以从中获取电子邮件值。

于 2014-12-04T02:27:22.190 回答