प्रतिक्रिया-मूल पर एक तर्क के साथ बाध्यकारी

Question

वांछित व्यवहार ऑनक्लिक हैंडलर को console.log पर एक तर्क (पाठ) पास करना है, लेकिन इसे लगता है कि मैं वाक्यविन्यास के साथ कुछ गलत कर रहा हूं।

अगर मैं जैसा कि नीचे तर्क छोड़ देते हैं, यह ठीक काम कर रहा है:

export default class Nav extends Component { 
    componentDidMount() { 
    this.props.pickNumber(3); 
    } 

    onPress() { 
    console.log('FOOOBAAR'); 
    } 
    render() { 
    return (
     <View> 
     <Text>####################</Text> 
     <Text>Intro Screen</Text> 
     <Text>Number: {this.props.numbers}</Text> 
     <TouchableHighlight onPress={this.onPress.bind(this)}> 
      <Text>Go to Foo</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 

} 

हालांकि, अगर मैं onPress हैंडलर के लिए एक तर्क के पास करना चाहते हैं, यह शिकायत अपरिभाषित का बाँध '' संपत्ति पढ़ा नहीं जा सकता '।

export default class Nav extends Component { 
    componentDidMount() { 
    this.props.pickNumber(3); 
    } 

    onPress(txt) { 
    console.log(txt); 
    } 
    render() { 
    return (
     <View> 
     <Text>####################</Text> 
     <Text>Intro Screen</Text> 
     <Text>Number: {this.props.numbers}</Text> 
     <TouchableHighlight onPress={this.onPress('foo').bind(this)}> 
      <Text>Go to Foo</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 

} 

धन्यवाद

अलावा:

onPress={this.onPress.bind('foo')} 

यह या तो काम नहीं करता: मैं के लिए इसे बदल सकते हैं।

Answer 1

आप ES6 का उपयोग करके निर्माता में बाध्यकारी कर सकते हैं:

export default class Nav extends Component { 
    constructor(props) { 
    super(props); 

    this.onPress = this.onPress.bind(this); 
    } 

और फिर

onPress(txt) { 
    console.log(txt); 
    } 

    render() { 
    return (
     <View> 
     <Text>####################</Text> 
     <Text>Intro Screen</Text> 
     <Text>Number: {this.props.numbers}</Text> 
     <TouchableHighlight onPress={() => this.onPress('foo')}> 
      <Text>Go to Foo</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

Answer 2

आप onPress मूल्य और पासिंग में यह जुड़ कर निर्माता में समारोह बंधन से बच सकते हैं 'इस' के बाद तर्क। कन्स्ट्रक्टर पैटर्न ठीक है लेकिन जितना अधिक मैं ओओ भूमि में जाता हूं, उतना ही अधिक परेशान लगता है। तुम इतनी तरह अपने कोड refactor कर सकते हैं,

export default class Nav extends Component { 
    componentDidMount() { 
    this.props.pickNumber(3); 
    } 

    onPress(txt) { 
    console.log(txt); // foo 
    } 
    render() { 
    return (
     <View> 
     <Text>####################</Text> 
     <Text>Intro Screen</Text> 
     <Text>Number: {this.props.numbers}</Text> 
     <TouchableHighlight onPress={this.onPress.bind(this,'foo')}> 
      <Text>Go to Foo</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 

} 

पहला तर्क है 'इस' और किसी भी अन्य तर्क जो उसी क्रम में प्राप्त हो जाएगा कि उसके बाद आपूर्ति की जा सकती।

Answer 3

आप वसा तीर भी साथ इसे हल कर सकते हैं:

export default class Nav extends Component { 

    handlePress = (text) => { 
    console.log(text); 
    } 

    render() { 
    return (
     <View> 
     <Text>####################</Text> 
     <Text>Intro Screen</Text> 
     <Text>Number: {this.props.numbers}</Text> 
     <TouchableHighlight onPress={() => this.handlePress('weeeeee')}> 
      <Text>Go to Foo</Text> 
     </TouchableHighlight> 
    </View> 
    ); 
    } 
}