This repository has been archived by the owner on Aug 1, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 306
How to use references???? #104
Labels
question
Further information is requested
Comments
If you're using React Hooks try this :
If you're still using classes :
More informations about refs here. |
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>.
|
Hello Michele, I wasn't able to reproduce your issue, can you provide a live working example ? You're mixing up hooks and classes, I would advise you to choose either one or another : Anyway, this is not an issue related to the component, you can close this issue :) |
I would recommend to put these examples in the README. Given example is not using |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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?
The text was updated successfully, but these errors were encountered: