Проблема преобразования функционального компонента React, Material-UI в компонент класса - PullRequest
Новая
       15

Проблема преобразования функционального компонента React, Material-UI в компонент класса

1 голос
/ 11 июня 2019

Я новичок в React, и это мой первый пост в SO. Я нашел отличный Combo-Box-подобный компонент React / Material-UI, который я хотел бы использовать. Однако мое приложение использует компоненты класса, а этот является функциональным компонентом ... Компоненты класса задыхаются при попытке включить этот, потому что он использует хуки для моделирования и управления состоянием, которые разрешены только в функциональных компонентах. Итак, я преобразовал его в компонент класса. Проблема в том, что компонент класса не будет фокусировать курсор, чтобы позволить мне печатать в TextField.

Я просмотрел код Javascript в отладчике в параллельном режиме, пытаясь выяснить, в чем отличие функционального (работает) от классового (не работает) компонента, помимо сравнения CSS. Я не вижу различий, поэтому, очевидно, я смотрю не в том месте.

В отладчике я могу видеть в js-код реагировать-выбора для onControlMouseDown, где вызывается _this.focusInput();, и в это время курсор фокусируется в поле ввода. Однако, как только я нажимаю Go и повторный рендеринг завершается, курсор больше не существует, и мой набор текста полностью игнорируется, в отличие от функциональной версии того же компонента, где курсор остается после повторного рендеринга.

Также пытались установить свойства входного компонента, такие как autoFocus=true, disabled=false и другие.

1) Функциональный код песочницы (работает): https://codesandbox.io/embed/material-demo-4fgow

2) Класс CodeSandbox (не работает): https://codesandbox.io/embed/ecstatic-frog-87b8r

Ниже приведен фрагмент кода реакции-выбора, в котором я сравнил 2 компонента с отладчиком. Обратите внимание, что openMenuOnClick верно как в рабочем, так и в нерабочем экземплярах, а this.state.isFocused равно false в обоих - единственное, что отличается, это, к сожалению, конечное поведение. 

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onControlMouseDown", function (event) {
    var openMenuOnClick = _this.props.openMenuOnClick;

    if (!_this.state.isFocused) {
        if (openMenuOnClick) {
            _this.openAfterFocus = true;
        }
        _this.focusInput();
    } else if (!_this.props.menuIsOpen) {
        if (openMenuOnClick) {
            _this.openMenu('first');
        }

Я ожидаю, что смогу печатать в этом компоненте, и он предоставит мне выборки, которые содержат то, что я напечатал, но я вообще не могу печатать в нем - курсор не фокусируется.

...