向父级展示子级事件

TheMan68 发表于 Dev

侠客68

我试图处理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>
        )
    }
}

内部事件单击可以很好地注册，但外部事件永远不会发生。

亚特兰大

那是因为在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>
        );
    }
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。