2016-11-16 8 views
1

私は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.(…) 

誰にもさせることができます私は私が間違っていることを知っている?

+0

フィールドコンポーネントはどのように見えますか?私はあなたのエラーメッセージがかなり指示していると言うでしょう:フィールドコンポーネントはタグに小道具を追加することができません。 – Maggie

+0

@Maggieページがレンダリングされないので、私はあなたに話すことができませんでした。そして、はい、私はそれが何をしているのか知っています - しかし、私は明らかにそれを支配していません。それは素晴らしいことではありません。 – user1775718

答えて

1

変更component={input}~component="input"textarea & selectと同じです。

+0

これは正しいかもしれません。新しいバージョン6.2.0のためのドキュメントはそれが方法だと示唆しているようだ、多分それはドキュメントのエラーだ... – user1775718

+0

これは私のための同様のtextareaの問題を解決した。 – softweave

関連する問題