简体   繁体   English

调用在 useEffect 中声明的 function

[英]Calling a function that was declared inside useEffect

i am very new to react.我很新的反应。 I as trying to add a signature module to a React component and everything worked fine so far.我试图将签名模块添加到 React 组件中,到目前为止一切正常。 The module also offers a couple of methods, like clearing the canvas.该模块还提供了几种方法,例如清除 canvas。 My issue is, i have no idea where to set of the function in order to call it later in the render part.我的问题是,我不知道在哪里设置 function 以便稍后在渲染部分调用它。 I have tried all possibilities (including useState, useRef) but cannot find a way to setup the function in a way so it is later.我已经尝试了所有可能性(包括 useState、useRef),但找不到以某种方式设置 function 的方法,所以它是稍后的。

So what i would like to access the clear method from the 3rd party library later in the return statement.所以我想稍后在 return 语句中从 3rd 方库访问 clear 方法。 I am aware useEffect was apparently not the right place to set the function up (however creating new SignaturePad works fine), but where would that be?我知道 useEffect 显然不是设置 function 的正确位置(但是创建新的 SignaturePad 工作正常),但那会在哪里呢?

import SignaturePad from "signature_pad";


    function OtherInfo(){

useEffect(()=> {
    const canvas = document.getElementById("canvo")
    const signaturePad = new SignaturePad(canvas)
    
    // cannot be called later  
    const clear = signaturePad.clear()
}) 


    return (

<div className="spefcontainer">
<input type="text" placeholder="More..." />
<input type="text" placeholder="Stuff..."/>
<canvas id="canvo"> </canvas>
<button onClick={clear}>Clear</button>
</div>
);}

export default OtherInfo;

Can you just put the code which clears the pad in a regular function inside the component?您可以将清除焊盘的代码放在组件内的常规 function 中吗? see below.见下文。 Does it have to be inside useEffect for a particular reason?出于特定原因,它是否必须在 useEffect 内部?

You can try to wrap the function in useMemo, so it does not run every time the component is rendered.您可以尝试将 function 包装在 useMemo 中,这样它就不会在每次渲染组件时都运行。 Also, consider whether you have to create the canvas and signature pad every time, or only the first time the element is rendered (in which case you can initialize them in useEffect with an empty dependency array maybe)另外,考虑您是否必须每次都创建 canvas 和签名板,或者仅在第一次渲染元素时(在这种情况下,您可以在 useEffect 中使用空的依赖数组初始化它们)

const clear = () => {

const canvas = document.getElementById("canvo")
const signaturePad = new SignaturePad(canvas)

// cannot be called later  
const clear = signaturePad.clear()}

useEffect() hook used for render after event occurring same ad componentDidMount() and componentDidMountUpdate(). useEffect() 钩子用于在事件发生后呈现相同的广告 componentDidMount() 和 componentDidMountUpdate()。

put that code outside useEffect() and create function 'clear' to call at the time of button click.将该代码放在 useEffect() 之外并创建 function 'clear' 以在单击按钮时调用。

import SignaturePad from "signature_pad";


    function OtherInfo(){

   const clear = ()=> {
    const canvas = document.getElementById("canvo");
    const signaturePad = new SignaturePad(canvas);
    
    signaturePad.clear();
}) 


    return (

<div className="spefcontainer">
<input type="text" placeholder="More..." />
<input type="text" placeholder="Stuff..."/>
<canvas id="canvo"> </canvas>
<button onClick={clear}>Clear</button>
</div>
);}

export default OtherInfo;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM