web-dev-qa-db-ja.com

React Redux？

私はこの単純な問題に困惑しています！フォームデータを取得して検証し、送信し、Express APIに送信リクエストを送信するだけです。しかし、その前に、私はこれを達成する方法を完全に理解しているとは思わない。 this の質問と these を見て、他にもたくさんの人がいましたが、これが最善のアプローチかどうかはわかりません。

これは私がそれが着手されると仮定する方法です：

サインアップページの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"
}
_

アクションをトリガーできる場所SignupAction()は、AJAX APIへの呼び出しを行い、レデューサーを更新します。

react-redux-form または redux-form のようなライブラリを使用するとなると、混乱が増します。単にname、surnameemail、およびpasswordのモデルまたは何かを用意したいのですが、これらのライブラリはすぐに過剰に設計されたように感じます次のような独自のレデューサーを持つようになります。

_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 '' 
    }
}
_

しかし、、私の質問は...これはパフォーマンスに影響しますか？

javascriptformsreactjs
9
dsomel21

redux-form を使用することをお勧めします。次のオプションがあります。

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

しかし、まだ使用したくない場合（使用することを強くお勧めします）、フォーム送信でデータを検証し、コンテナでアクションをディスパッチするだけです。そのため、コンポーネントからコンテナにデータをパラメータとして渡し、そこでアクションをディスパッチし、ポスト/プット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
     }
  }
5
Harkirat Saluja

フォームを扱う非常に簡単な方法：

class UserInfo extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    
    const formData = {};
    for (const field in this.refs) {
      formData[field] = this.refs[field].value;
    }
    console.log('-->', formData);
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <input ref="phone" className="phone" type='tel' name="phone"/>
            <input ref="email" className="email" type='tel' name="email"/>
            <input type="submit" value="Submit"/>
          </form>
        </div>
    );
  }
}

export default UserInfo;
8
E. Fortes