reactjs - Material-ui TextField 与 React-Redux 混淆

Question

我有一个带有 TextField 的 React 组件:

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

该组件通过使用react-redux的connect函数生成的容器连接到存储。目前没有参数传递给容器。并且不会在组件中的任何位置分派(dispatch)任何操作。

当我尝试在 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 的地方就是您触发捕获输入的操作的地方。