Javascript 如何从组件中获取元素

我有一些脚本，需要元素，但我找不到如何从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>
    );
}

---

首先需要注意的是，getDOMNode不推荐使用，您应该使用findDOMNode，而且您不需要在渲染中使用create元素，因为如果您使用您使用的jsx语法，它将转换为您使用的CreateElement..等语法。。幕后

有关选择图元的问题，请执行以下操作：

    React.findDOMNode(this.refs.findMe) 

---

我用这种方式添加事件

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);
},

---

你不应该这样做，react有自己处理onclick事件的方法，你是在绕过它。它们在渲染之前的方式是使用onClick执行的方式绑定在您的示例中不起作用的原因是因为您没有画布El，并且SignatureObj未定义，但是，在事件中使用facebook的方法很明确：使用React，您只需将事件处理程序作为一个骆驼壳道具传递，类似于在普通HTML中的传递方式。React通过实现合成事件系统，确保所有事件在IE8及以上版本中表现相同。也就是说，React知道如何根据规范冒泡和捕获事件，并且无论您使用的是哪个浏览器，传递给事件处理程序的事件都保证与W3C规范一致。facebook:getDOMNode已弃用，并已替换为React.findDOMNode。此方法在扩展React.Component的ES6类组件上不可用。在React的未来版本中，它可能会被完全删除。

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);
},