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 状态树。您更有可能需要 value 而不是事件本身。

例如：

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

调用：

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

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

Material-ui TextField 搞乱了 react-redux

Material-ui TextField messing up with react-redux

reactjs

redux

material-ui

react-redux