नीचे यह कोड, जब मैं इनपुट में टेक्स्ट इनपुट करता हूं, ऑन चेंज फ़ंक्शन चालू होगा।

Div पर onChange क्यों चल सकता है? मुझे इसके बारे में दस्तावेज़ कहां मिल सकते हैं?

class App extends Component {
    render() {
        return (
            <div className="App">
                <GiantInput onChange={(e) => console.log('giant onChange', e.target)}/>


                <div onChange={(e) => {
                    console.log('change!', e);
                }}>
                    输入2:<input style={{width: '50%', 'border-color': 'black'}}/>
                </div>
            </div>
        );
    }
}

मैं इस समस्या को पूरा करता हूं जब मैं {... अन्य} = प्रॉप्स का उपयोग करता हूं, "ऑन चेंज" फ़ंक्शन दूसरों में समाहित होता है, और एक डिव पर डालता है, यह घटक को ऑनचेंज को दो बार कॉल करता है, और मैं खोजने के लिए बहुत समय बिताता हूं क्यों।

0
Yuiffy 16 अप्रैल 2018, 16:51

1 उत्तर

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

यह React.js के बारे में नहीं है। इसे ईवेंट बबलिंग कहा जाता है।

इवेंट बबलिंग को रोकने के लिए e.stopPropagation() का उपयोग करें।

आपके कोड में

<div onChange={e =>console.log('change!', e)}>
      输入2: <input onChange={e => e.stopPropagation()} 
                 style={{width: '50%', 'border-color': 'black'}}/>
</div>
2
Ritwick Dey 25 अप्रैल 2018, 15:04