材质ui Select和“ redux-form”的意外行为

Question

I have a simple 'redux form' with a Select component from 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>

Works fine. Hovewer , if I change the value prop from typeof number to string , eg

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

the value changes properly, but just after one second, the value becomes 0 (as it was initially), and the selected value disappears (it's empty from now on). It had a correct value just for a moment, but somehow it's being automatically set back to 0 .

Even tried with rendering the field:

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

Still, it changes the value, and just after that it returns to 0 . If I console.log the form values, it shows up (after manually changing the value):

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

(it happens in period of one second)

Looking forward for any help. Thank you.

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

Answer 1

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