Untergeordnete Ereignisse dem übergeordneten Objekt aussetzen

Question

Ich versuche, das untergeordnete Click-Ereignis einer Schaltfläche im übergeordneten Element in "Native react" zu verarbeiten. Im sehr neue native zu reagieren, so verzeihen Sie bitte alle Buch Fehler :)

// my transparent button child 

const styles = StyleSheet.create({ 
    button: { 
     backgroundColor: 'transparent', 
     borderColor: Theme.button.borderColor, 
     borderWidth: Theme.button.borderWidth, 
     borderRadius: Theme.button.buttonRadius, 
     fontFamily: Theme.button.fontFamily, 
     fontWeight: Theme.button.fontWeight, 
     color: Theme.button.fontColor 
    } 
}) 

var handleClick = function() { 
    console.log('You clicked: '); 
} 

const TransparentButton = React.createClass({ 
    render() { 
     var boundClick = handleClick.bind(this); 
     return (
      <Button 
       style={styles.button} 
       textStyle={styles.button} 
       onPress={boundClick}> 
        {this.props.children} 
       </Button> 
     ); 
    } 
}); 

module.exports = TransparentButton; 

// and this is the snippent that is trying to catch the click event 
class Welcome extends Component { 
    render() { 
     return (
      <Page 
      style={styles.container} 
      backgroundColor={Theme.bgColor}> 

       <TransparentButton 
        handleClick={() => console.log('hello there outter')}> 
        Ryans Text Button 
       </TransparentButton> 
      </Page> 
     ) 
    } 
} 

Die innere Ereignis klicken fein registriert, aber die outter Ereignis happenes nie.

Answer 1

Das liegt daran, dass Sie im TransparentButton die Elternfunktion nicht aufrufen.

const TransparentButton = React.createClass({ 
    render() { 
     return (
      <Button 
       style={styles.button} 
       textStyle={styles.button} 
       onPress={this.props.handleClick}> 
        {this.props.children} 
       </Button> 
     ); 
    } 
}); 

Die es6 Weise fast identisch ist, und es ist besser, über den Code konsistent zu sein, nicht mischen ES5 und ES6:

export default TransparentButton extends Component{ 
    render() { 
     return (
      <Button 
       style={styles.button} 
       textStyle={styles.button} 
       onPress={this.props.handleClick}> 
        {this.props.children} 
       </Button> 
     ); 
    } 
};