React-redux-formsで値が設定されていません

Question

現在、フォームコンポーネントにデータを渡していますが、Reduxフォームの値フィールドに反映されていません。実際には、redux形式のng-model（angular js）コンセプトを実行したいと思います。ここで私は私のコード、コンソールで

1. import React, { Component } from 'react'; 
    
   import { Field, reduxForm } from 'redux-form'; 
    
   import { connect } from 'react-redux'; 
    
   
    
   import '../style.less' 
    
   
    
   class EditProfile extends Component { 
    
       
    
   //here am getting the json value in 'info' 
    
   render() { 
    
       const { handleSubmit, pristine, reset, submitting, errors, info } =  this.props; 
    
       console.log("hello fname?---> "+info.fName); 
    
       return (
    
        <form onSubmit={handleSubmit}> 
    
        <div> 
    
         <label 
    
         className="full-name-business-n" 
    
         htmlFor="fName">Full Name 
    
         </label> 
    
         
    
         <Field className="text-box-one" 
    
         name="fName" 
    
         component="input" 
    
         type="text" 
    
         onChange={this.handleChange} 
    
         value={info.fName} 
    
         /> 
    
         
    
        </div> 
    
        
    
        <button 
    
        className="save-btn btn" 
    
        type="submit" 
    
        disabled={pristine || submitting}>SAVE 
    
        </button> 
    
         
    
        </form> 
    
       ); 
    
       } 
    
   } 
    
   
    
   export default reduxForm({ 
    
       form: 'editForm' 
    
   })(EditProfile)

   私はの値を取得しています意味の代わり<Field>の<input>を使用する場合は値
2. を取得していますが付属しました。

私は間違いを犯しましたか？誰かが私を明確にすることができますか？ [初心者から初心者]です。

Answer 1

あなたは値と操作の変更を明示的に渡していますが、redux-formがそれを処理することをお勧めします。

infoをinitialValuesとしてフォームに入力すれば、そこからフォームを処理できます。

return (
    <form onSubmit={handleSubmit}> 
    <div> 
     <label 
     className="full-name-business-n" 
     htmlFor="fName">Full Name 
     </label> 

     <Field className="text-box-one" 
     name="fName" 
     component="input" 
     type="text" 
     // You don't need onChange unless you want to have a callback to do something with the value at the same time as it's persisting to redux store 
     // onChange={this.handleChange} 
     // value={info.fName} 
     /> 

    </div> 

    <button 
     className="save-btn btn" 
     type="submit" 
     disabled={pristine || submitting}>SAVE 
    </button> 

    </form> 
); 

あなたが開いている場合、あなたのデータが正しく保存されていることを十分に見ることができます

<EditProfile 
    initialValues={info} 
    onSubmit={handleSubmit} 
/> 

が続いフォームでこのコードは次のようになります。

だからあなたのページでは、このようなものを持っている必要がありますredux-dev-toolsを起動し、入力時に実行されるアクションを参照してください。

デフォルトでは、入力時に値にアクセスすることはできませんが、formValueSelectorを追加することで達成できますが、それは別の話であり、私はそれを使用しません。

Answer 2

あなたも、この探し、この

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

import '../style.less' 

class EditProfile extends Component { 

componentWillReceiveProps(nextProps) { 
    const {change} = this.props 
    change('fname', nextProps.info.fName) 
} 

//here am getting the json value in 'info' 
render() { 
    const { handleSubmit, pristine, reset, submitting, errors, info } =  this.props; 
    console.log("hello fname?---> "+info.fName); 
    return (
     <form onSubmit={handleSubmit}> 
     <div> 
      <label 
      className="full-name-business-n" 
      htmlFor="fName">Full Name 
      </label> 

      <Field className="text-box-one" 
      name="fName" 
      component="input" 
      type="text" 
      onChange={this.handleChange} 
      value={info.fName} 
      /> 

     </div> 

     <button 
     className="save-btn btn" 
     type="submit" 
     disabled={pristine || submitting}>SAVE 
     </button> 

     </form> 
    ); 
    } 
} 

export default reduxForm({ 
    form: 'editForm' 
})(EditProfile)