React/Reduxフォームでの提出の処理

Question

ユーザーがフォームを送信したときにフォーム値を取得します。

var CommentForm = React.createClass({ 
    handleAuthorChange: function(e) { 
    this.setState({author: e.target.value}); 
    }, 
    handleTextChange: function(e) { 
    this.setState({text: e.target.value}); 
    }, 
    handleSubmit: function(e) { 
    e.preventDefault(); 
    var author = this.state.author.trim(); 
    var text = this.state.text.trim(); 
    if (!text || !author) { 
     return; 
    } 
    render: function() { 
    return (
     <form className="commentForm" onSubmit={this.handleSubmit}> 

このスタイルは、入力ごとの処理関数を介した状態にすべての変更をプッシュ：チュートリアルを示し、これを反応します。私がReduxを使いこなせば、私はアクションとアクションクリエイターをミックスに追加すると思う。それはオーバーヘッドのようだ。

handleSubmitの引数がイベントであることに注意してください。

私は以下のReact/Reduxスターターキットに出くわしました。これは作業がはるかに簡単です。それはスマート/コンテナコンポーネントとダム/プレゼンテーションコンポーネントの組み合わせを使用しています。

Container

@connect(
() => ({}), 
    {initialize}) 
export default class Survey extends Component { 
    ... 

    handleSubmit = (data) => { 
    window.alert('Data submitted! ' + JSON.stringify(data)); 
    this.props.initialize('survey', {}); 
    } 

    render() 
    return (<SurveyForm onSubmit={this.handleSubmit}/>) 
    ... 

Presentational

class SurveyForm extends Component { 
    static propTypes = { 
    handleSubmit: PropTypes.func.isRequired, 
    } 

    render() { 
    const { handleSubmit } = this.props; 
    return (
     <div> 
     <form className="form-horizontal" onSubmit={handleSubmit}> 
    ... 
    } 
} 

私は上不明確だ何フォームのonSubmitハンドラのハンドラがさ​​れている理由Facebookのチュートリアルの議論のためのイベントを取り上げますが、なぜスターターキットのonSubmitハンドラーがフォームデータを取っているのですか？スターターキットはredux-formのパッケージが、このハンドラがどのように動作するべきかに直接影響することはありません。

Answer 1

SurveyFormクラスの鍵はredux-formで、ES2016 decoratorとなります。

... 
@reduxForm({ 
    form: 'survey', 
    fields: ['name', 'email', 'occupation', 'currentlyEmployed', 'sex'], 
    validate: surveyValidation, 
    asyncValidate, 
    asyncBlurFields: ['email'] 
}) 
export default 
class SurveyForm extends Component { 
... 

デコレータはラッピング成分を返す、SurveyForm用ラッピング機能として作用します。

あなたが気づいたことさえあるかもしれませんが、SurveyFormコンポーネントは、handleSubmitプロペラをコンテナに受け入れません。これは、デコレータ@reduxFormによって提供されているためです。その後、イベントが処理され、formDataのみがコンテナハンドラに返されます。これはトップレベルのonSubmit propです。

reduxFormは、基本的には、ラップされたSurveyFormコンポーネントを返すと考えることができます。

コードthereに潜入することができますが、警告があります。かなり緻密です。