How to use references????

[micTrb]

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?

[SimonBellucci]

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.

[micTrb]

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())}

Undo

<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 notifications@github.com ha scritto:

If you're using React Hooks try this :

import {useRef} from 'react';

const YourComponent = () => { const canvas = useRef(); return( <>

Clear canvas ) }; If you're still using classes : class YourComponent extends React.Component { constructor(props) { super(props); this.canvas = React.createRef(); } render() { return( <> Clear canvas ) } } More informations about refs here . — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub , or unsubscribe .

[SimonBellucci]

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.