मैं प्रतिक्रिया-हुक के साथ useref की कोशिश कर रहा हूँ, लेकिन जब मैं setAccountVal विधि को कॉल करता हूं, हालांकि जब मैं मान को सचेत करता हूं तो बच्चे की स्थिति बदल जाती है, यह अभी भी "Ege" है। क्या आपको इस मामले के बारे में कोई जानकारी है?

    import React, { useState, useRef, useImperativeHandle, useEffect, forwardRef } from "react";
interface A {
    name?: string;
}

const Child = forwardRef((props: A, ref) => {
    const [acc, setAcc] = useState("Ege");
    useImperativeHandle(ref, () => ({
        getAlert(value: string) {
            alert("getAlert from Child===>" + value);
        },

        setAccountVal(val: string) {
            setAcc(val);

        },
        acc
    }));

    useEffect(
        () => {
            debugger;
            setAcc(props.name || "dummy");
            console.log(acc + " --");
        },
        [props.name]
    );

const changeState = (e:React.FormEvent<HTMLInputElement>)=>{
    setAcc(e.currentTarget.value);
}


    return <input onChange={changeState}></input>;
})
function App() {
    let [name, setName] = useState("Nate");

    let nameRef = useRef<any>(null);

    const submitButton = () => {
        debugger;
        const comp = nameRef.current;
        comp.setAccountVal("Mahmut");
        comp.getAlert(comp.acc);
    };

    return (
        <div className="App">
            <p>{name}</p>
            <div>
                <button type="button" onClick={submitButton}>
                    Submit
        </button>
                <Child ref={nameRef} />
            </div>
        </div>
    );
}

export default App;

जब मैं एक सामान्य विधि को कॉल करता हूं, तो मैं देख सकता हूं कि मुझे क्या चाहिए। लेकिन समस्या यह है कि मैं एसीसी राज्य पर नया राज्य मूल्य देख सकता हूं लेकिन जब मैं इसे माता-पिता से लेता हूं तो यह पुराना (वास्तव में प्रारंभिक राज्य वैल ("ईजी")) राज्य मूल्य प्रदर्शित कर रहा है।

संपादित करें: असल में मैं जो करना चाहता हूं वह नीचे है

//Child component with forwardRef
const [account, setAccount] = useState("defaultAccount");
const [branch, setBranch] = useState("defaultBranch");
const [person, setPerson] = useState("defaultPerson");

useImperativeHandle(ref, () => ({
    selectedAccount: account,
    selectedBranch: branch,
    selectedPerson: person
}));


//Parent component
const childComponentRef = useRef(null);
//Is it possible to change child component's state? Is it allowed?
childComponentRef.current.selectedAccount = "new account";
childComponentRef.current.selectedBranch = "new branch";
childComponentRef.current.selectedPerson = "new person";

alert(childComponentRef.current.selectedAccount);
alert(childComponentRef.current.selectedBranch);
alert(childComponentRef.current.selectedPerson);

//We can change these variables but child component does not rerender with new values.

ठीक है! मुझे समाधान मिल गया है। जब मैं गेटटर सेटर के साथ रेफरी वेरिएबल्स का उपयोग करता हूं तो अब मैं उपयोग के साथ वर्तमान मान भी प्राप्त कर सकता हूं !!

//Child component with forwardRef
const [account, setAccount] = useState("defaultAccount");
const [branch, setBranch] = useState("defaultBranch");
const [person, setPerson] = useState("defaultPerson");

useImperativeHandle(ref, () => ({
    **get account(){
     return account;
    },
    set account(val : string){
    setAccount(val);
    },**
    selectedBranch: branch,
    selectedPerson: person
}));


//Parent component
const childComponentRef = useRef(null);
//Is it possible to change child component's state? Is it allowed?
childComponentRef.current.selectedAccount = "new account";
childComponentRef.current.selectedBranch = "new branch";
childComponentRef.current.selectedPerson = "new person";

alert(childComponentRef.current.selectedAccount);
alert(childComponentRef.current.selectedBranch);
alert(childComponentRef.current.selectedPerson);

//We can change these variables but child component does not rerender with new values

विस्तृत डेमो :

हुक के साथ प्रतिक्रिया-रेफरी संपादित करें .

2
Egomen 13 फरवरी 2019, 11:20

1 उत्तर

सबसे बढ़िया उत्तर

ऐसा इसलिए है क्योंकि आप बिना किसी इनपुट को सेट किए useImperativeHandle का उपयोग कर रहे हैं, इसलिए फ़ंक्शन कभी भी अपडेट नहीं होते हैं। इनपुट के रूप में बस acc जोड़ें, और यह काम करेगा:

useImperativeHandle(ref, () => ({
  getAlert(value: string) {
    alert("getAlert from Child===>" + value);
  },

  setAccountVal(val: string) {
    setAcc(val);

  },
  acc
}), [acc]);
4
Anxo 13 फरवरी 2019, 08:32