首页 文章

Material-ui TextField搞乱了react-redux

提问于
浏览 次
3

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

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

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

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

enter image description here

对于我输入的每个字符，它始终是相同的 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 事件如何在页面属性中结束？发生了什么事！

reactjs redux react-redux material-ui

1 回答

  • 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的地方，你将触发捕获输入的动作 .

    回复于

相关问题