フィールド値がカスタムコンポーネントで印刷されない

Question

何らかの理由でField値がcustomComponent constに印刷されません。

const CustomComponent = function(field) { 
    console.log(field.input.value); //blank, no value 
    return (
    <div> 
     <input { ...field.input } type={field.type} placeholder={field.placeholder} className={field.className} /> 
    </div> 
); 
} 

...... 

<Field name="test" component={CustomComponent} type="text" placeholder="Test" value="testvalue" /> 

Answer 1

ここでの問題は、あなたが直接redux-formFieldコンポーネントのvalueを設定しようとしているということですが、redux-formの全体的なアイデアは、あなたがライブラリがそのの世話をしましょうということ、です。

あなたが（ドキュメントに"Initialize from state"例を参照）ことを行うためにinitialValuesプロパを使用し、ReduxのフォームFieldの初期値を設定したい場合

だけreduxForm上Reduxのconnect -decoratorスティック - デコレータを使用して還元状態を使用して初期フォームの値を設定することができます

class MyForm extends Component { 
    render() { 
    return (
     <form> 
     { /* This one will have the static initial value */ } 
     <Field 
      name="staticValue" 
      component={ CustomComponent } 
      type="input" 
      placeholder="Static Placeholder" 
     /> 
     { /* This one will have the dynamic initial value */ } 
     <Field 
      name="dynamicValue" 
      component={ CustomComponent } 
      type="input" 
      placeholder="Dynamic Placeholder" 
     /> 
     </form> 
    ) 
    } 
} 

const mapStateToProps = reducers => { 
    return { 
    initialValues: { 
     staticValue: 'some static default initial value', 
     dynamicValue: reducers.dynamicReducer.dynamicValue 
    } 
    } 
} 

@connect(mapStateToProps) 
@reduxForm({ formName: 'MyForm' }) 
class MyFormContainer extends Myform {} 

希望します。