Error accessing methods

[DClark5218]

Hello,

I am having problems accessing the methods you described via Refs.

I keep getting signature.clear is not a function

Here's my code

Signature = React.createClass({
    displayName:"Signature",

    clearSig(){
        var signature = React.findDOMNode(this.refs.mySignature);
        signature.clear();
    },
    acceptSig(){
        var signature = React.findDOMNode(this.refs.mySignature);
        if(signature.isEmpty()){
                alert('Please sign the agreement');
            return;
        }
        var sigImage = signature.toDataURL();
        console.log(sigImage);

    },
    render:function(){
        return(
            <div>
                <SignaturePad ref="mySignature" />
                <div className="signature-bottom">
                    <div className="pull-left">
                        <div onClick={this.clearSig} className="btn reset">
                            Clear Signature
                        </div>
                    </div>
                    <div className="pull-right">
                        By clicking accept you agree to the terms stated above.
                        <div onClick={this.acceptSig} className="btn save pull-right">
                            Save &amp; Accept
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

Can you help point me in the right direction?

[ge3kusa]

In our use cases we haven't marked up our own clear button. Instead we use the clearButton prop. The component gives you one and will call clear() for you when pressed.

<SignaturePad ref="mySignature" clearButton={true} />

Pull requests welcome if you want to control the clear button further via another prop. Maybe something that allows you to pass in a custom class name or ID for targeting in CSS or custom click behavior...

[DClark5218]

@ge3kusa I needed a way to clear, but also save the image. I wasn't able to clear or save. I had to modify the package directly. I can post it if you want to see!

Thanks!

[remotezygote]

@DClark5218: You did not actually want the DOM node in your case, since you are calling methods of the component. You should be able to call the function directly on the ref instead (not awesome, but should make your use case work). Just remove the React.findDOMNode.

Signature = React.createClass({
    displayName:"Signature",

    clearSig(){
        this.refs.mySignature.clear();
    },
    acceptSig(){
        var signature = this.refs.mySignature;
        if(signature.isEmpty()){
                alert('Please sign the agreement');
            return;
        }
        var sigImage = signature.toDataURL();
        console.log(sigImage);

    },
    render:function(){
        return(
            <div>
                <SignaturePad ref="mySignature" />
                <div className="signature-bottom">
                    <div className="pull-left">
                        <div onClick={this.clearSig} className="btn reset">
                            Clear Signature
                        </div>
                    </div>
                    <div className="pull-right">
                        By clicking accept you agree to the terms stated above.
                        <div onClick={this.acceptSig} className="btn save pull-right">
                            Save &amp; Accept
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});