Material-ui TextField搞乱了react-redux

Question

我有一个带有TextField的react组件：

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

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

当我尝试在TextField输入一些文本时，我看到一些正在调度的动作，我可以看到redux-devtools：

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

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

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

例如：

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

哪个叫：

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

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