React + Redux：複数コンポーネントフォームを送信

Question

入力フィールドを含むコンポーネントAがあるとします。 2番目のコンポーネントBには送信ボタンが含まれています。 2つのコンポーネントが直接リンクされていません（例：2-depthツリーの2葉です）

送信時入力値を取得する必要があります。

私の頭に浮かんだもっとも明白な解決策は、React Componentのrefsをredux状態にバインドすることでした。このようにして、stateは入力値（state.fieldName.input.valueからアクセス）への参照を持ちます。

mapStateToPropsは、状態、したがって入力値にアクセスできる関数であるonClick propを返し、「不純な」ジョブを実行することができます（例：入力コンポーネントと直接関係はないことに注意してください）。 DBリクエスト）

だから私のコードは次のようにする必要があります：

//components/TestForm.jsx 
class TestForm extends Component { 
    render() { 
     return <FormInput 
        ref={(ref) => this.props.registerFormField(ref)} 
        value=... 
        ... 
       /> 
    } 
} 

//redux/actions/index.js 
const registerFormField = (field) => { 
    return { 
    type: ActionTypes.REGISTER_FORM_FIELD, 
    field: field 
    } 
} 

//redux/reducers/index.js 
const rootReducer = (state = {}, action) => { 
    switch (action.type) { 
    case ActionTypes.REGISTER_FORM_FIELD: 
     var newState = {...state}; 
     newState[action.field.input.name] = action.field.input; 
     return newState 
    default: 
     return state 

    } 
} 

//containers/SubmitButton.js 
const mapStateToProps = (state, ownProps) => { 
    return { 
     text: "Submit", 
     onClick:() => { 
      //do your impure job with state.fieldName.value 
     } 
    } 
} 
const SubmitButton = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(FormSubmitButton) 

//components/FormSubmitButton.jsx 
class FormSubmitButton extends Component { 
    render() { 
     return <button 
        onClick={this.props.onClick} 
       > 
        {this.props.text} 
       </button> 
    } 
} 

私は簡単にReduxの形式のドキュメントを読んで、前述したように、それは二つの成分から非関連を結合することができないようです（たぶん私は」 m間違った;））

ありますかこの問題を解決するための他の正しい/エレガントなソリューションですか？

Answer 1

この場合、refを使用する必要はありません。

慣用的なアプローチは、valueプロパティを指定して、フォームフィールドをcontrolled componentsとして作成することです。これは、グローバル状態（mapStateToPropsにマップされている）から、または共通の親コンポーネントの状態から供給することができます。

また、入力の変更を聞く必要があります。そのためにはinputのonChange小道具にハンドラを供給してください。このハンドラは、どのアプローチをとっているかに応じて、reduxストアまたはコンポーネントステートのいずれかでフォームデータを変更する必要があります。

このようにして、フォームデータにアクセスできる限り、応募アプリケーションのどこに送信ボタンなどを置いても問題ありません。ご利用の場合、have a look at this JSBinの作業たとえば

---

。これは、フォームを複数のコンポーネントに分割して、に依存せずにreduxストアに入力値を保持する方法を示しています。