關於示例表格的直接副本的未知道具

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。