material ui Select 和 'redux-form' 的意外行为

Question

我有一个简单的 'redux form'，带有 Select 组件，来自 newest 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 属性从 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}
  />
)

仍然，它改变了值，紧接着它 returns 到 0。如果我 console.log 表单值，它会显示（手动更改值后）：

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

（一秒内发生）

期待任何帮助。谢谢你。

Edit: This is what happens in redux dev tools, when choosing an item with string value - in this case pln.

Answer 1

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

material ui Select 和 'redux-form' 的意外行为

Unexpected behavior with material ui Select and 'redux-form'

javascript

drop-down-menu

reactjs

material-ui

redux-form