Почему добавление stopPropagation () в контейнер React Select полностью останавливает событие React Select? - PullRequest
Новая
       2

Почему добавление stopPropagation () в контейнер React Select полностью останавливает событие React Select?

0 голосов
/ 03 июня 2019

Я просто хочу остановить всплывающее окно со стрелками событий и ввести клавиши, оставив событие реакции выбора нетронутым. Поэтому я положил event.stopPropagation() на контейнер из списка выбора реакции. Но это полностью мешает отреагировать на выбранные по умолчанию функции select. Разве событие не должно всплывать от ребенка к родителю?

Я загрузил источник здесь

Просто беги 

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

1 Ответ

0 голосов
/ 04 июня 2019

я думаю, вам нужно использовать event.preventDefault() вместо event.stopPropagation();

Event.preventDefault() - отменяет событие, если оно отменено, без остановки дальнейшего распространения этого события.

event.stopPropagation() метод останавливает передачу события родительским элементам, предотвращая выполнение любых родительских обработчиков событий.

...