3

私は反応するのがかなり新しいので、これはかなり簡単なことかもしれません。現在、(ReactBootstrap から) Modal コンポーネントに取り組んでおり、Modal ダイアログ コンポーネント内で react-bootstrap Input コンポーネントを使用してい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()入力で関数を直接呼び出します。

this.refs.theInput.getValue()あなたの値を返す必要がありますtheInput。

getDOMNode()基礎となるDOM実装が将来のバージョンで変更されないことを前提としているため、回避できる場合は使用しないでください。他の関数については、react-bootstrap Input.jsx ファイルを参照してください。

于 2015-03-19T18:57:21.183 に答える
0

あなたのonClickイベントは に接続されてhandleSubmit()います。問題ないようです。

this.refs.theInput.getDOMNode().valueでは、 notを介して電子メールの値にアクセスできますhandleSubmit()か?

もしそうなら、ReactBootstrap<Input>がネイティブ DOM<input>を他の要素でラップしているのではないかと思います。実際<input>に電子メールの値を取得するには、DOM ツリーをナビゲートする必要がある場合があります。

于 2014-12-04T02:27:22.190 に答える