なぜ私はreactJsのReduxフォームから空の値を取得していますか？

Question

送信ボタンをクリックしたときに空の値が表示される理由を理解できません。私は得る：You have submitted: {}。問題は、Reset dataボタンをクリックしたときと同じです。私が理解したことによると、結果は{"firmName":"test"}であるはずです。私はそれを働かせることはできません。どんな助けや提案も非常に感謝しています。

class FirmDataTab extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      firmName: 'test' 
     }; 
     this.reset = this.reset.bind(this); 
    } 

    reset() { 
     this.setState = { 
      firmName: '' 
     }; 
    } 

    render() { 
     const { handleSubmit } = this.props; 
     return(
      <form onSubmit={ handleSubmit }> 
       <div className="jumbotron"> 
        <div> 
         <label>Firm name</label> 
         <div style={{marginTop: -22, marginLeft: 80}}> 
          <input 
           name="firmnname" 
           type="text" 
           defaultValue={this.state.firmName} /> 
         </div> 
        </div> 
        <div> 
         <FormGroup> 
          <Col smOffset={2} sm={10}> 
           <button 
            type="submit" 
            className="btn btn-info" style={{marginLeft: -40, marginRight: 20, marginTop: 10}}> Submit </button> 
           <button onClick={this.reset}> Reset data </button> 
          </Col> 
         </FormGroup> 
        </div> 
       </div> 
      </form> 

     ); 
    } 
} 

FirmDataTab .propTypes = { 
    handleSubmit: PropTypes.func.isRequired 
}; 

export default reduxForm({ 
    form: 'TestForm' 

})(FirmDataTab); 

Answer 1

defaultValue小道具は状態の変化を反映していません。代わりにvalue小物を使用する必要があります。詳細についてはthe docをご確認ください。

Answer 2

ここで最初に間違えたのは、地方の州の管理です。 reduxフォームでは、フォームをグローバルアプリケーション状態に接続する必要があります。これ以上ローカルsetStateを使用することはできません。

ここでは動作する解決策があります。提出時に私は入力値を記録しました。データをバックエンドに保存するために、アクション作成者に同じ値を呼び出すことができます。リセットや他のシナリオでも同様の操作を行います。私はここでそれらをコメントしました。

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

class UserNameNew extends Component { 
    constructor(props) { 
     super(props); 
    } 

    onSubmit(values) { 
     console.log(values); 
     // Call the action creator which is responsible for saving data here. 
    } 

    reset() { 
     // call the action creator to reset the state here. 
    } 

    render() { 
     const { handleSubmit } = this.props; 
     return(
      <form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }> 
       <div> 
        <div> 
         <label>First Name</label> 
         <div style={{marginTop: -22, marginLeft: 80}}> 
          <Field name="firstName" component="input" type="text" /> 
         </div> 
        </div> 
        <div> 
         <button type="submit" className="btn btn-primary">Submit</button> 
        </div> 
       </div> 
      </form> 

     ); 
    } 
} 

export default reduxForm({ 
    form: 'UserNameForm' 

})(UserNameNew); 

これが役に立ちます。ハッピーコーディング！