부모에게 자식 이벤트 노출

Question

[React Native]의 부모 요소에있는 단추의 자식 클릭 이벤트를 처리하려하고 있습니다. 그래서 기본 반응 할 임 아주 새로운 어떤 책 실수를 용서하십시오 :

// 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> 
     ) 
    } 
} 

내부 이벤트 클릭이 잘 등록하지만, outter는 이벤트가 happenes 결코

.

Answer 1

TransparentButton에서는 부모 함수를 호출하지 않기 때문입니다.

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

ES6의 방법은 거의 동일하며 ES5와 ES6 혼합하지, 코드를 통해 일치하는 것이 좋습니다 :

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