I Have some script, that takes element, but i cant find how to get it from react component. At least, i can get element after rendering, but now i have another problem - cant make event on button, coz i need 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>
);
}
});
Finally, i need to get something like this
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>
);
}
first some side notes, getDOMNode is deprecated, u should use findDOMNode, further u don't need to use create element within the render, because if you use the jsx syntax which u do it will be converted to the syntax u are using (createlement ..etc .. under the hood)
for your problem about selecting the element:
React.findDOMNode(this.refs.findMe)
<-- makes u find the node or as u call it :D (Magic)
render: function() {
return (
<div>
<canvas ref='findMe'></canvas> <------- magic
<button>Clear</button>
</div>
);
}
Hope this helps! some good reads:
refs: https://facebook.github.io/react/docs/more-about-refs.html
jsx: https://facebook.github.io/react/docs/jsx-in-depth.html
i used this way to add event
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);
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.