मुझे एक बहुत ही साधारण समस्या है। मैं चाहता हूं कि ऊपरी चर केवल तभी बदला जाए जब पहला बटन क्लिक किया जाए। हालाँकि, यह हमेशा बदला जाता है। मुझे समझ में नहीं आता कि मेरी तर्क त्रुटि कहाँ है।

export default function First() {
    const [first, setFirst] = useState('1')

    const test = (a) => {
        setFirst(a)
    }

    return (
        <div>
            <h1>{first}</h1>
            
            <Second onClick={test}/>
        </div>
    )
}


export default function Second( {onClick}) {
    const [second, setSecond] = useState('2')

    const  change = () => {
        second == '2' ? setSecond('1') : setSecond('2')
        console.log('2')
    }

    return (
        <div>
            <h1 style={{color:"green"}}>{second}</h1>

            <button onClick={change}>Test</button>
            <br/>
        <button onClick={onClick(second)}>Herz</button>
            <br/>
            {/* <button onClick={onClick(judas)}>Klick</button> */}

        </div>
    )
}
1
lomu98 16 जिंदा 2021, 16:46

1 उत्तर

सबसे बढ़िया उत्तर
onClick={onClick(second)}

यह कहता है कि तुरंत onClick(second) को कॉल करें, और इसके रिटर्न वैल्यू को onClick प्रोप में पास करें। मान लें कि वापसी मान undefined है, बाद में क्लिक होने पर कुछ नहीं होगा।

इसके बजाय, यह करें:

onClick={() => onClick(second)}

उस कोड के साथ, आप एक नया फ़ंक्शन बना रहे हैं और उस फ़ंक्शन को onClick में पास कर रहे हैं। बाद में, जब क्लिक होता है, तो आपके फ़ंक्शन को कॉल किया जाएगा और यह onClick(second) को कॉल करता है

2
Nicholas Tower 16 जिंदा 2021, 16:48