使用材料ui选择和'redux-form'的意外行为

Question

我有一个简单的'redux form'，其中Select组件来自最新 material-ui-next。

import { TextField } from 'material-ui';

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

工作正常。 Hovewer ，如果我将value道具从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 }

（它发生在一秒钟内）

期待任何帮助。谢谢。

修改：这是在redux dev工具中选择具有string值的项目时发生的情况 - 在本例中为pln。

Answer 1

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