मैं एक कार्यात्मक घटक के लिए एक वर्ग घटक को फिर से लिख रहा हूं, लेकिन मैं यह नहीं समझ सकता कि ऑनक्लिक फ़ंक्शन में हुक सेटर तक कैसे पहुंचा जाए।

मैं हमेशा की तरह हुक घोषित करता हूं, जो एक चर और उपयोगकर्ता नाम तक पहुंचने के लिए एक सेटर है:

export function Header(props: IHeaderProps) {

    const [username, setUsername] = useState('');


    // set username in header if found in storage
    useEffect(() => {
        const token = JSON.parse(localStorage.getItem(TOKEN_NAME) || '{}');

        if(token.Username) {
        setUsername(token.Username);
        }
    });......

JSX में मेरे पास "साइन आउट" बटन है। जब क्लिक किया जाता है, तो यह हैंडललॉगआउट फ़ंक्शन को आमंत्रित करता है, जहां मुझे उपयोगकर्ता नाम को खाली स्ट्रिंग पर सेट करने की आवश्यकता होती है:

    ....
    <span className="ms-Grid-col ms-u-sm4"><DefaultButton onClick={handleLogout} text="Log out" /></span>
    ....

function handleLogout() {
    ...
    // how can i set the username to empty string here?
}

लेकिन मैं इसे कैसे हासिल कर सकता हूं? जब यह एक वर्ग घटक था तो मेरे पास राज्य चर तक पहुंच थी, हुक का उपयोग करके इससे निपटने का सही तरीका क्या है? मैं "मार्कअप में लैम्ब्डा का उपयोग नहीं कर सकता" नियम के साथ टाइपप्रति का उपयोग कर रहा हूँ

0
Flimzy_Programmer 24 अप्रैल 2019, 10:17

1 उत्तर

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

आप कार्यात्मक घटक के अंदर फ़ंक्शन घोषित कर सकते हैं और फिर घटक स्थिति तक पहुंच सकते हैं।

export function Header(props: IHeaderProps) {

    const [username, setUsername] = useState('');

    function handleLogout() {
        // handle logout logic here
        setUsername('');
    }

    // set username in header if found in storage
    useEffect(() => {
        const token = JSON.parse(localStorage.getItem(TOKEN_NAME) || '{}');

        if(token.Username) {
        setUsername(token.Username);
        }
    });......
1
ljbc1994 24 अप्रैल 2019, 07:33