如何從組件中獲取元素

Question

我有一些腳本，需要元素，但是我找不到如何從react組件獲取它。 至少，我可以在渲染后獲取元素，但是現在我遇到了另一個問題-無法在按鈕上創建事件，因為我需要SignatureObj

var SignaturePad = require('signature_pad');

var SignatureWidget = React.createClass({

    _handleClear: function(e, SignatureObj) {
        SignatureObj.clear();
    },

    _getSignature: function(canvas) {
        return new SignaturePad(canvas);
    },

    componentDidMount: function() {

        var wrapper = this.getDOMNode(),
            canvas  = wrapper.querySelector('canvas'),
            SignatureObj = this._getSignature(canvas);
    },

    render: function() {
        var canvas = React.createElement('canvas');

        return (
            <div>
                {canvas}
                <button>Clear</button>
            </div>
        );
    }
});

最后，我需要得到這樣的東西

render: function() {
    var canvas = React.createElement('canvas'),
        >> canvasEl = canvas.getElement(),<< magic
        SignatureObj = this._getSignature(canvasEl);

    return (
        <div>
            {canvas}
            <button onClick={this._handleClear.bind(this, SignatureObj)}>Clear</button>
        </div>
    );
}

Answer 1

首先要注意的一點是，不贊成使用getDOMNode，您應該使用findDOMNode，進一步，您不需要在render內使用create元素，因為如果您使用jsx語法，那么它將被轉換為您正在使用的語法（createlement ..etc ..在引擎蓋下）

關於選擇元素的問題：

    React.findDOMNode(this.refs.findMe) 

<-使您找到節點或稱其為：D（Magic）

    render: function() {
        return (
            <div>
                <canvas ref='findMe'></canvas> <------- magic
                <button>Clear</button>
            </div>
        );
    }

希望這可以幫助！ 一些不錯的讀物：

裁判： https : //facebook.github.io/react/docs/more-about-refs.html

jsx： https ：//facebook.github.io/react/docs/jsx-in-depth.html

Answer 2

我用這種方式添加事件

componentDidMount: function() {
    var pad             = this.refs.pad.getDOMNode(),
        saveButton      = this.refs.save.getDOMNode(),
        clearButton     = this.refs.clear.getDOMNode(),
        SignatureObj    = this._getSignature(pad);

    clearButton.onclick = this._handleClear.bind(this, SignatureObj);
    saveButton.onclick  = this._handleSave.bind(this, SignatureObj);
},