Question

我正在创建一个React组件（父级），它接收一个链接，按钮或其他React组件（子）作为属性，并且我想将附加的单击处理程序附加到传入的组件。这个子组件通常已经定义了一个单击处理程序，因此我不能使用React.cloneElement向其添加onClick。此外，有时子组件的单击处理程序会阻止事件传播到父组件，因此我无法将单击侦听器附加到父组件并允许事件冒泡。

编辑：父/子关系以及应该附加额外事件监听器的方式/位置使得这个问题与我见过的其他问题略有不同，其答案是通过回调（或回调数组）到子组件中。我没有权限更改子组件的API。

以下是一些示例代码：

export default class ParentComponent extends React.Component {
    constructor(props) {
        super();

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

    handleClick(event) {
        // do something (this is not working)
    }

    render() {
        let { childComponent } = this.props;

        return (
            <div>
                {React.cloneElement(childComponent, {
                    onClick: this.handleClick
                })}
            </div>
        )
    }
}

ParentComponent.PropTypes = {
    childComponent: PropTypes.element
};

Answer 1

到目前为止，我发现这样做的最好方法是使用refs和findDOMNode，如上面的评论所示。一旦引用了子组件的DOM节点，就可以在挂载父组件时添加常规事件监听器：

export default class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.childComponentRef.addEventListener('click', function() {
            // do something (this works!)
        }, false);
    }

    render() {
        let { childComponent } = this.props;

        return (
            <div>
                {React.cloneElement(childComponent, {
                    ref: (childComponentRef) => {
                        this.childComponentRef = ReactDOM.findDOMNode(childComponentRef);
                    }
                })}
            </div>
        )
    }
}

ParentComponent.PropTypes = {
    childComponent: PropTypes.element
};

如何将多个事件侦听器从React中的父组件附加到子组件的同一事件中？

1 个答案: