Material-ui TextField 搞砸了 react-redux答案

【问题标题】：Material-ui TextField messing up with react-reduxMaterial-ui TextField 搞砸了 react-redux
【发布时间】：2016-12-21 16:22:15
【问题描述】：

我有一个带有 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 事件怎么会出现在页面属性中？那里发生了什么！？

【问题讨论】：

标签： reactjs redux react-redux material-ui

【解决方案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 的地方就是你触发动作来捕获你的输入的地方。

【讨论】：