Функция onChange управляемого компонента (реакция-упоминания) срабатывает только при вводе пользователем, а не при обновлении состояния - PullRequest
Новая
       33

Функция onChange управляемого компонента (реакция-упоминания) срабатывает только при вводе пользователем, а не при обновлении состояния

0 голосов
/ 13 апреля 2020

В приложении для чата, над которым я работаю, я использую React, easy-peasy (redux) и пакет response-упоминаний. Компонент реагирования упоминается, чтобы работать как контролируемый компонент, и я думаю, что именно здесь у меня возникают проблемы.

Чтение и запись входного значения в / из redux (через easy-peasy): 

const typingMessage = useStoreState(state => state.typingMessage.value);
const setTypingMessage = useStoreActions(actions => actions.typingMessage.set);

Установка значения контролируемого компонента равным значению из хранилища redux 

const handleChange = event => {
  setTypingMessage(event.target.value);
}

<MentionsInput value={typingMessage} onChange={handleChange}>
  <Mention
    markup="@[__display__]"
    data={data}
    trigger="@"
   />
</MentionsInput>

Проблема, с которой я столкнулся, заключается в том, что функция handleChange никогда не запускается, когда я программно обновляю состояние (нет взаимодействия с пользователем при вводе «keydown, et c.»). Это означает, что если я установлю сообщение ввода вне onChange, оно обновит значение на входе, но никогда не вызовет функцию onChange.

Вот полный пример. Если вы нажмете, чтобы заполнить пользователя, вы заметите, что «Handle change fired» console.log () никогда не запускается. Однако, если вы введете сообщение, вы увидите, что оно срабатывает. Я пробовал множество вариантов, таких как использование реакции локального состояния, которое, в свою очередь, обновляет хранилище избыточностей. Все еще не повезло. Любая помощь будет принята с благодарностью.

ПРИМЕР CODESANDBOX

...