材料 ui Select 和“redux-form”的意外行为答案

【问题标题】：Unexpected behavior with material ui Select and 'redux-form'材料 ui Select 和“redux-form”的意外行为
【发布时间】：2017-12-31 11:42:04
【问题描述】：

我有一个简单的“redux 表单”，其中包含来自 newest material-ui-next 的 Select 组件。

import { TextField } from 'material-ui';

<Field
   name="name"
   component={TextField}
   select
>
   <MenuItem value={1}>Lily</MenuItem>
   <MenuItem value={2}>Mark</MenuItem>
</Field>

工作正常。 Hovewer，如果我将 value 属性从 typeof number 更改为 string，例如

<Field
   name="name"
   component={TextField}
   select
>
   <MenuItem value="lily">Lily</MenuItem>
   <MenuItem value="mark">Mark</MenuItem>
</Field>

值正确更改，但在一秒钟后，值变为0（与最初一样），所选值消失（从现在开始为空）。它有一个正确的值，但不知何故它被自动设置回0。

甚至尝试渲染字段：

const renderSelectField = ({ input, label, meta: { touched, error }, children, ...custom }) => (
  <TextField
    {...input}
    select
    onChange={(event, index, value) => input.onChange(event.target.value)}
    children={children}
    {...custom}
  />
)

它仍然会更改值，然后返回到0。如果我 console.log 表单值，它会显示（手动更改值后）：

{ name: "Lily" }
{ name: 0 }
{ name: 0 }

（在一秒钟内发生）

期待任何帮助。谢谢你。

编辑：这是在string value中选择项目时发生的redux开发工具 - 在此情况下pln。

【问题讨论】：

能否包含两个事件之间触发的操作列表？你可以使用github.com/gaearon/redux-devtools。
@squgeim 我添加了一张图片
这是状态的变化。您能否包括操作（左侧列表）。
@squgeim 这两个动作（动作类型除外）之间唯一重要的区别是有效负载。更改有效负载为pln。模糊有效载荷是0。
那么这两者之间的一秒内没有派发其他动作？

标签： javascript reactjs drop-down-menu material-ui redux-form

【解决方案1】：

基于此react-select issue 和此redux-form issue，您似乎需要覆盖默认的onBlur 事件。

【讨论】：

@Patrickkx 你是如何解决这个问题的？您对原始问题中的代码进行了哪些更改？
@JamesJ.Just 覆盖了 onblur 函数，该函数来自我组件中 redux-form 字段的道具。你必须基本上覆盖它，比如onBlur={null}