为什么在React Select容器上添加stopPropagation（）完​​全停止React Select事件？

Question

我只是想停止事件的箭头冒泡并输入键，同时不影响react select的事件。因此，我将event.stopPropagation()放在了反应选择的容器上。但这完全阻碍了对select的默认功能的反应。该事件不应该从孩子到父母吗？

我已经上传了源代码here

只要运行

npm install
npm start

代码如下：

import React, { Component } from 'react'
import CreatableSelect  from "react-select/lib/Creatable"

const colourOptions = [
    { value: 'red', label: 'Red' },
    { value: 'blue', label: 'Blue' },
    { value: 'yellow', label: 'Yellow' }
]

class CustomCreatableSelect extends Component {

    componentDidMount() {
        this.Ref.addEventListener('keydown', function (event) {
            let key = event.which || event.keyCode
            if (key === 37 || key === 38 || key === 39 || key === 40 || key === 13) {
                event.stopPropagation();
                console.log("onKeyDown "+key);
            }
        });
    }

    render() {
        return (
            <div ref = { ref => { this.Ref = ref }}> 
                <CreatableSelect
                    onChange                = {this.handleChange}
                    options                 = {colourOptions}
                    formatCreateLabel       = {this.formatCreate}
                    createOptionPosition    = {"first"}
                    ref                     = { ref => { this.SelectRef = ref }}
                />
            </div>
        );
    }
}

export default CustomCreatableSelect

Answer 1

我认为您需要使用is-retryable而不是event.preventDefault()

event.stopPropagation();-如果事件被取消，则取消该事件，而不停止该事件的进一步传播。

Event.preventDefault()方法停止将事件冒泡到父元素，从而阻止执行任何父事件处理程序。