Javascript 反应+；Redux：提交多组件表单

假设我有一个包含输入字段的组件A。 第二个组件B包含提交按钮。 这两个组件没有直接链接（例如，它们是两层树中的两片叶子）

提交时，我需要检索输入值，如何在react+redux环境中解决此问题

我想到的最明显的解决方案是将React组件的ref绑定到redux状态， 通过这种方式，状态具有对输入值的引用（通过state.fieldName.input.value访问）

在submit button组件（记住它与输入组件没有直接关系）中，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>
    }
}

//组件/TestForm.jsx
类TestForm扩展组件{
render（）{
返回此.props.registerFormField（ref）}
值=。。。
...
/>
}
}
//redux/actions/index.js
常量注册表字段=（字段）=>{
返回{
类型：ActionTypes.REGISTER\u FORM\u字段，
字段：字段
}
}
//redux/reducers/index.js
const rootReducer=（state={}，action）=>{
开关（动作类型）{
案例操作类型.注册\表单\字段：
var newState={…state}；
newState[action.field.input.name]=action.field.input；
返回新闻状态
违约：
返回状态
}
}
//容器/SubmitButton.js
const mapStateToProps=（state，ownProps）=>{
返回{
文本：“提交”，
onClick:（）=>{
//使用state.fieldName.value执行您的不纯工作
}
}
}
const SubmitButton=connect(
MapStateTops，
mapDispatchToProps
)（FormSubmitButton）
//components/FormSubmitButton.jsx
类FormSubmitButton扩展组件{
render（）{
返回
{this.props.text}
}
}

我简单地阅读了redux表单文档，它似乎不能像上面所描述的那样绑定两个不相关的组件（可能我错了；）

---

是否有其他正确/优雅的解决方案来解决此问题？

在这种情况下，不需要使用

ref

s

惯用的方法是通过提供

值

属性来创建表单字段。这可以从全局状态（映射到

MapStateTrops

）或公共父组件的状态提供

您还需要倾听输入的变化。为此，为

输入的
onChange
属性提供一个处理程序。然后，此处理程序应根据您采取的方法，在redux存储区或组件状态中更改表单数据

这样，只要react应用程序可以访问表单数据，在react应用程序中的何处放置提交按钮等都无关紧要


有关用例的工作示例。这演示了如何将表单分离为多个组件，并将输入值保留在redux存储中，而无需依赖
ref
s