如何将mouseDown事件从父级发送到子级组件？

Question

我正在使用React创建一个音乐合成器，我想从键盘事件中触发按钮事件。如何将事件从父组件发送到子组件？

我尝试将侦听器附加到每个子组件按钮上，并从父组件分发按钮事件，但这不起作用。

export default class App extends React.Component {

    handleKeyDown = event => {
        const key = event.key.toUpperCase();
        const evt = new MouseEvent("mousedown");
        document.getElementById(key).dispatchEvent(evt);
    }

    handleKeyUp = event => {
        const key = event.key.toUpperCase();
        const evt = new MouseEvent("mouseup");
        document.getElementById(key).dispatchEvent(evt);
    }

    render() {
        return (
            <div    id="main-content"
                    className="synthesizer-application"
                    onKeyDown={this.handleKeyDown}
                    onKeyUp={this.handleKeyUp}
                    tabIndex="0">
                // Keyboard renders the keys
                <Keyboard />
            </div>
        );
    }
}

export default class Key extends React.Component {
    // Methods not shown
    render() {
        return (
            <button className="key"
                    id={this.props.letter}
                    onMouseDown={this.handleKeyPress}
                    onMouseUp={this.handleKeyRelease}>
                {this.props.letter}
            </button>
        );
    }
}

我希望按钮会收到事件，但是什么也没发生。

感谢您的帮助。