Интерфейс материалов и горячие клавиши React - PullRequest
Новая
       51

Интерфейс материалов и горячие клавиши React

0 голосов
/ 09 ноября 2019

Я пытаюсь интегрировать реагирующие горячие клавиши с пользовательским интерфейсом материала, и я столкнулся с проблемой.

У меня есть модальное место внутри родительского элемента. Открытое состояние модального режима контролируется с помощью флага, который находится в родительском элементе. Когда пользователь использует горячую клавишу для обновления флага в дочернем элементе (с помощью реквизита), изменение не отражается в родительском элементе, а модальный режим остается открытым. Но когда пользователь использует нажатие кнопки, поведение нормальное.

Родительский компонент: 

const Parent = (props) => {
    const [ isModalOpen, setModalOpen ] = useState(false);

    return (
        <>
            <Button onClick={() => setModalOpen(true) }/>
            <ChildModal 
                isModalOpen={isModalOpen}
                setModalOpen={setModalOpen} />
        </>
    )
}

Дочерний компонент: 

const ChildModal = (props) => {
    console.log("Rendering child modal...");
    console.log(props.isModalOpen);
    const [ modalValue, setModalValue ] = useState("");

    const keyHandlers = {
        SUBMIT : handleModalClose
    }

    const keyMap = {
        SUBMIT: "enter"
    }

    const handleModalClose = () => {
        props.setModalOpen(false);
    }

    const handleModalSubmit = () => {
        props.setModalOpen(false);
        // doOtherStuff(modalValue);
    }

    return (
        <HotKeys keyMap={keyMap} handlers={keyHandlers}>
            <Dialog open={isModalOpen}>
                <DialogTitle>Title</DialogTitle>
                <DialogContent>
                    <TextField 
                        label="New Side Topic" 
                        onChange={(event) => { setModalValue(event.value.target) }}
                        value={modalValue} />
                </DialogContent>
                <DialogActions>
                    <Fab className="close-modal-button close-fab" onClick={handleModalClose}>
                        <CloseIcon />
                    </Fab>
                    <Fab className="process-input-button open-fab" onClick={handleModalSubmit}>
                        <CheckIcon />
                    </Fab>
                </DialogActions>
            </Dialog>
        </HotKeys>
    )
}

Мой код более сложный,но эта упрощенная версия отражает проблему. Модал имеет две кнопки - одну для закрытия и одну для обработки ввода текста. Когда пользователь закрывает модальное вручную (с помощью любой из двух кнопок), модальное окно закрывается и вывод на консоль появляется один раз. Когда пользователь закрывает модал клавишей «Ввод», модал остается открытым, и консоль показывает следующее:

Рендеринг дочернего модала ...

false

Рендеринг дочернего модала ...

true

По какой-то причине при обновлении состояния родителя с помощью горячей клавиши модал рендерит дважды, один раз с правильным значениемisModalOpen, и второй раз со старым значением.

У кого-нибудь есть указатели?

...