How to use references????

[Michael Trb]

I'm trying to use the funcionalities like undo(), clear() etc...
I've followed the example provided but I really ddon't understand

<CanvasDraw
ref={canvasDraw => (this.saveableCanvas = canvasDraw)}
/>

that's what I've done in my code, but it seems that ref is not undefined....

Someone can please explain me better how to use functionalities and refs?

[Simon Bellucci]

If you're using React Hooks try this :

import {useRef} from 'react';

const YourComponent = () => {
    const canvas = useRef();
    return(
        <>
            <CanvasDraw ref={canvas}/>
            <button onClick={() => canvas.current.clear()}>Clear canvas</button>
        </>
    )
};

If you're still using classes :

class YourComponent extends React.Component {
    constructor(props) {
        super(props);
        this.canvas = React.createRef();
    }
    render() {
        return(
            <>
                <CanvasDraw ref={this.canvas}/>
                <button onClick={() => this.canvas.current.clear()}>Clear canvas</button>
            </>
        )
    }
}

More informations about refs here.

[Michael Trb]

Wow Simon, Thank you very much! Very quick answer. I take the occasion to ask you a new question: That’s my function component: I declare a ref in it by using React.createRef()… const MyComponent = () => { const classes = useStyles(); const dispatch = useDispatch(); const ds = useSelector(state => state.ds); const canvasRef = React.createRef(); And this is the return function return( <Button className={classes.button} variant="contained" onClick={() => console.log(canvasRef.current.undo())} <b>Undo</b> </Button> <CanvasDraw style={{ boxShadow: "0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3)" }} {...defaultProps} /> ) The question is: why (even if I don’t put the ref prop in the CanvasDraw) my canvasRef still address the CanvasDraw component? Thank you in advance! Michele

…

Il giorno 9 dic 2020, alle ore 23:14, Simon Bellucci ***@***.***> ha scritto: If you're using React Hooks try this : import {useRef} from 'react'; const YourComponent = () => { const canvas = useRef(); return( <> <CanvasDraw ref={canvas}/> <button onClick={canvas.current.clear()}>Clear canvas</button> </> ) }; If you're still using classes : class YourComponent extends React.Component { constructor(props) { super(props); this.canvas = React.createRef(); } render() { return( <> <CanvasDraw ref={this.canvas}/> <button onClick={this.canvas.current.clear()}>Clear canvas</button> </> ) } } More informations about refs here <https://reactjs.org/docs/refs-and-the-dom.html>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#104 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGFAJRRFIV7YPTKHOF6OM7DST7ZELANCNFSM4UTLZVRQ>.

[Simon Bellucci]

Hello Michele,

I wasn't able to reproduce your issue, can you provide a live working example ?
What are you passing inside defaultProps ?

You're mixing up hooks and classes, I would advise you to choose either one or another : useRef() or createRef().

Anyway, this is not an issue related to the component, you can close this issue :)

[Talmaj]

I would recommend to put these examples in the README. Given example is not using useRef nor .current.