Материал-UI TextField Мессинг с среагировать-Redux

Question

У меня есть реагируют компонент с TextField в нем:

<TextField 
    hintText="name" 
    floatingLabelText="Your name:"/> 

компонент подключен к магазину с помощью контейнера, генерируемого с использованием connect функцию среагировать-Redux , Пока нет параметров, переданных в контейнер. И никакое действие не отправляется нигде в компоненте.

Когда я пытаюсь ввести текст в моем TextField, я вижу какое-то действие, которые направляются из Redux-Devtools Я вижу:

Это всегда то же самое SET_FOCUS_PAGE действия быть посланным для каждого символа Я вхожу, с атрибутом страницы, установленным в change событие TextField. Кроме того, на консоли у меня есть много таких предупреждений:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `bubbles` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See react-event-pooling for more information. 

мне не удалось понять все это, почему это SET_FOCUS_PAGE быть посланным компонентом, которые не имеют доступа к действию? Как событие change окажется в атрибуте страницы? Что там происходит?

Answer 1

Похоже, вы передаете синтетическое событие дереву состояний редукции. Скорее всего, вы хотите значение вместо самого события.

Например:

<TextField 
    hintText="name" 
    floatingLabelText="Your name:" 
    onChange={(event) => handleChangeText(event)} 
/> 

который называет:

const handleChangeText = (event) => { 
    console.log('the text is:', event.target.value); 
} 

При обновлении состояния дерева с этим, то вы должны получить то, что вам нужно. Там, где я написал console.log, вы можете отключить действие, чтобы захватить ваш вход.