बच्चे घटक (रिएक्ट/रेडक्स) से चेंज इवेंट पर पहुंच

Question

मेरे पास एक कंटेनर घटक है जो इनपुट के साथ एक बच्चे घटक प्रस्तुत कर रहा है। मैं onChange ईवेंट के दौरान बाल घटक के मूल्य तक पहुंच प्राप्त करना चाहता हूं, लेकिन मुझे इनपुट मान के बजाय "प्रॉक्सी" ऑब्जेक्ट मिल रहा है।

कंटेनर घटक

... 

class InputContainer extends React.Component { 

    handleChange = (val) => { 
     console.log(val); 

     // => Proxy { [[Handler]]: Object, [[Target]]: SyntheticEvent, [[isRevoked]]: false } 
    } 

    render() { 
     return <Input handleChange={this.handleChange} {...this.props} />; 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(InputContainer); 

इनपुट घटक

export default function Input(props) { 
    return <input onChange={props.handleChange} />; 
} 

मैं इस "प्रॉक्सी" वस्तु क्यों मिल रही है और कैसे मैं InputContainer से इनपुट के मूल्य मिल सकता है?

Answer 1

क्या आप देख रहे हैं प्रतिक्रिया के SyntheticEvent का एक उदाहरण है। ध्यान दें कि सब कुछ, एक ही काम करेंगे यानी यह काम करना चाहिए:

console.log('ev -> ', ev.target.value); 

हालांकि, अगर आप डेवलपर टूल में मान देखना चाहता हूँ की कोशिश:

console.log('ev -> ', ev.nativeEvent); 

स्रोत: https://facebook.github.io/react/docs/events.html

उद्धरण :

आपके ईवेंट हैंडलर सिंथेटिकएवेंट के उदाहरण पारित किए जाएंगे, जो एक क्रॉस-ब्राउज़र रैपर है ब्राउज़र की मूल घटना। यह ब्राउज़र के मूल कार्यक्रम के समान इंटरफ़ेस है, जिसमें स्टॉपप्रॉपैगेशन() और preventDefault() शामिल है, ईवेंट को सभी ब्राउज़रों में समान रूप से काम करने के अलावा। यदि आपको लगता है कि आपको किसी कारण से अंतर्निहित ब्राउज़र ईवेंट की आवश्यकता है, तो इसे प्राप्त करने के लिए केवल मूलइवेंट विशेषता का उपयोग करें।

Answer 2

यह सुनिश्चित नहीं है कि यह एक टाइपिंग त्रुटि है, लेकिन handleChange के बजाय आपके पास hangleChange है। वैसे भी, onChange एक Event की तरह वस्तु से गुजरता है, मूल्य event.target.value

handleChange(event) { 
    console.log(event.target.value); 

Read up on React's event system

Answer 3

यह पूरी तरह से सामान्य है में पाया जा सकता। आप event.target.value के माध्यम से मूल्य का उपयोग कर सकते हैं:

handleChange(event) { 
    console.log(event.target.value); 
} 

More info in the React docs.