Material-ui TextField搞乱react-redux

Question

我的反应组件中包含TextField：

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

组件通过使用react-redux的connect函数生成的容器连接到商店。目前没有传递给容器的参数。并且不会在组件中的任何位置调度任何操作。

当我尝试在我的TextField中输入一些文字时，我看到一些行动正在发送，我可以看到redux-devtools：

对于我输入的每个字符，它始终是相同的SET_FOCUS_PAGE操作，页面属性设置为change的{​​{1}}事件。同样在控制台上我有很多警告：

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事件如何在页面属性中结束？那里发生了什么！？

Answer 1

看起来您正在将合成事件传递给redux状态树。您更有可能想要值而不是事件本身。

例如：

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

调用：

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

如果你用那个更新状态树，那么你应该得到你需要的东西。在我编写console.log的地方，你将触发捕获输入的动作。