Question

我使用的是与材料ui v1兼容的redux-form-material-ui 5.0.0-beta.2。

我想要一个Select组件，我可以在做出选择时激活onChange事件，并且我希望选择的值显示在Select字段中（应该如此）。如果我使用redux-form-material-ui Select组件，我会得到错误：

Cannot read property 'onChange' of undefined

我可以通过以下示例来重现它：如何将redux-form与材料ui here一起使用，并将selectField替换为redux-form-material-ui选择并将{children}放在open和close标签之间。您可以看到相同的错误：

Code example

^^如果你在Chrome中打开它，你会得到＆＃34; Cannot read property 'onChange'..＆＃34;错误，但在Firefox中它说＆＃34; _ref$input is undefined＆＃34;。

可以通过某种方式解决这个问题：

import { Select } from 'redux-form-material-ui';

const renderSelectField = (
  { input, label, meta: { touched, error }, children, ...custom },
) => (
    <Select 
      errorText={touched && error}
      {...input}
      onChange={(event, index, value) => input.onChange(value)}

      {...custom}
    >
      {children}
    </Select>
); 
const MaterialUiForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>

      <div>
        <Field
          name="favoriteColor"
          component={renderSelectField}
          label="Favorite Color"
        >
          <MenuItem value="ff0000" primaryText="Red" />
          <MenuItem value="00ff00" primaryText="Green" />
          <MenuItem value="0000ff" primaryText="Blue" />
        </Field>
      </div>

//code continues..

如果我在redux-form-material-ui上使用示例尝试更简单的方法： redux-form-material-ui/tree/5.0

<Field 
    name="plan" 
    component={Select}
    onChange={(event, index, value) => input.onChange(value)} 
    placeholder="Select a plan"
>
    <MenuItem value="monthly">Monthly</MenuItem>
    <MenuItem value="yearly">Yearly</MenuItem>
    <MenuItem value="lifetime">Lifetime</MenuItem>
  </Field>

但是如果我添加onChange它就不起作用。做选择时，它说：

props.input is undefined

Answer 1

您可能在Redux Form官方文档中查找了该示例，但是，正如注释中提到的那样，他们使用了 SelectedField 而不是 Select 组件。

SelectField使用 3个参数实现 onChange 方法，但是 Select 仅使用一个。改用它。

<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Redux-form-material-ui - 使用onChange选择

1 个答案: