直接复制示例表单的未知道具

Question

我正在尝试让 redux 表单 (http://redux-form.com/6.0.0-alpha.4/examples/simple/) 的基本表单示例正常工作。我复制了代码并将其缩减为只有一个输入，如下所示：

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const { DOM: { input, select, textarea } } = React;

console.log('input', input);

const SimpleForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props;
  console.log('props', props);
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <div>
          <Field id="firstName" name="firstName" component={input} type="text" placeholder="First Name" />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'simple',  // a unique identifier for this form
})(SimpleForm);

不幸的是，这导致：

Warning: Unknown props `input`, `meta` on <input> tag. Remove these props from the element. For details, see react-unknown-prop
        in input (created by bound createElement)
        in bound createElement (created by ConnectedField)
        in ConnectedField (created by Connect(ConnectedField))
        in Connect(ConnectedField) (created by Field)
        in Field (created by SimpleForm)
        in div (created by SimpleForm)
        in div (created by SimpleForm)
        in form (created by SimpleForm)
        in SimpleForm (created by Form(SimpleForm))
        in Form(SimpleForm) (created by Connect(Form(SimpleForm)))
        in Connect(Form(SimpleForm)) (created by ReduxForm)
        in ReduxForm (created by CreateEntityPage)
        in div (created by Paper)
        in Paper (created by CreateEntityPage)
        in div (created by CreateEntityPage)
        in CreateEntityPage (created by RouterContext)
        in main (created by App)
        in div (created by App)
        in MuiThemeProvider (created by App)
        in div (created by App)
        in div (created by App)
        in App (created by Connect(App))
        in Connect(App) (created by RouterContext)
        in RouterContext (created by Router)
        in Router (created by App)
        in div (created by App)
        in IntlProvider (created by IntlWrapper)
        in IntlWrapper (created by Connect(IntlWrapper))
        in Connect(IntlWrapper) (created by App)
        in Provider (created by App)
        in App
        in AppContainerprintWarning

然后：

Uncaught (in promise) Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. Check the render method of bound createElement.(…)

谁能告诉我我做错了什么？？

Answer 1

将 component={input} 更改为 component="input"。 textarea & select.

相同

直接复制示例表单的未知道具

Unknown props on direct copy of example form

reactjs

redux

redux-form