問題

私はこの単純な問題に困惑しています!私は単純に私のフォームデータを取って、それを検証し、それを提出し、Express APIに投稿要求を提出したいと思います。しかしその前に、私はこれを達成する方法を徹底的に理解しているとは思わない。私はこのの質問とこれらのと他の多くのものを見ましたが、これが最良のアプローチであるかどうかはわかりません。

これは私がそれが行われると仮定する方法です:

サインアップページ用のReactコンポーネントを作成します。 (デモ用の簡体字)

 class SignupForm extends Component {
    constructor(props){
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
    }
    onSubmit(val){
        debugger;
    }
    render(){
        return (
            <form onSUbmit={ (e)=> this.onSubmit(e) }>
                <input type="text" />
                <label></label>
                <button type="submit">Submit</button>
            </form>
        )
    }
}
 

ボタンをクリックすると、OnSubmit()関数がトリガーされ、JSONデータが渡されます。

 {
   "name": "Kanye",
   "surname": "West",
   "email":"[email protected]",
   "password":"notsurehowthiswillwork"
}
 

私のAPIへのAJAX呼び出しを行い、私のリダクターを更新するアクションSignupAction()をトリガーすることができます。

react-redux-form redux-form のようなライブラリを使用する場合の混乱の多重化。私はちょうどnamesurname emailpasswordのモデルや何かを持っていたいと思っていますが、これらのライブラリはレデューサーのように自分自身を持つようになるとすぐにオーバーエンジニアリングされていると感じています:

 const store = createStore(combineForms({
   user: initialUser,
}));
 

私の他のオプションは:

 class SignupForm extends Component {

    constructor(props){
        super(props);
        this.state.form = {
            name : '',
            surname: '',
            email: '',
            password: ''
        }
    }
    onSubmit(e){
        e.preventDefault();
        this.props.SignupAction(this.state.form);
        // then reset the state agian to '' 
    }
}
 

しかし、私の質問は...これはパフォーマンスに影響し、もしそうならWHY?

  ベストアンサー

私は redux-form を使うことを提案します。それはあなたに以下のオプションを与える:

  1. 入力の検証
  2. 日付やファイルのアップロードを含む入力に関するさまざまなタイプ
  3. 検証が成功した後に呼び出されるonSubmitメソッドを提供します(これは、APIを呼び出して状態を更新するアクションをディスパッチするポイントです)

しかし、まだ使用したくない場合(私はそれを使用することを強くお勧めします)、フォームサブミットでデータを検証し、コンテナ内のアクションをディスパッチするだけです。したがって、データをコンポーネントからコンテナにパラメータとして渡して、アクションをディスパッチする場合はpost/put APIを呼び出します(redux形式では何も渡す必要はありません。

     onSubmit(val){
        debugger;
    }
    render(){
        const { onSubmit } = this.props //pass onSubmit from 
        return (
            <form onSubmit={ (e)=> {onSubmit} ) }>
                <input type="text" />
                <label></label>
                <button type="submit">Submit</button>
            </form>
        )
    }
}
 

コンテナ:

 mapDispatchToProps(dispatch){
   return {
    onSubmit => {
     //dispatch action
     }
  }
 

  同じタグがついた質問を見る

javascriptformsreactjs