React + Redux:提交多组件表单 [英] React + Redux: submit multi-component form

问题描述

假设我的组件A包含一个输入字段. 第二个组件B包含一个提交按钮. 这两个组件不是直接链接的(例如，它们是2深度树中的2叶子)

Suppose i have Component A that contains an input field. A second Component B contains a submit button. The two components aren't linked directly (e.g they are 2 leaf in a 2-depth tree)

在提交时，我需要检索输入值，如何在React + Redux环境中解决该问题?

On Submit i need to retrieve input value, how to resolve this in a react + redux environment?

我想到的最明显的解决方案是将React Component的引用绑定到redux状态， 这样，状态就可以引用输入值(可以通过state.fieldName.input.value访问).

The most obvious solution that came to my mind was to bind React Component's refs to redux state, in this way the state has the reference to the input value (accessed through state.fieldName.input.value).

在提交按钮Component(请记住，它与输入组件没有直接关系)中，mapStateToProps返回onClick道具，该道具可以访问状态，从而可以访问输入值，并且可以执行不纯"的工作(例如db请求)

In the submit button Component (remember it has no direct relations with input component) the mapStateToProps return onClick prop that is a function that can access to the state and thus the input values and can do the "impure" job (e.g. db request)

所以我的代码应该是这样的:

So my code should be like this:

//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形式的文档，看来它无法绑定上述两个与组件无关的文件(也许我错了；))

I briefly read redux-form docs and it seems it can't bind two non-related from components as described above (maybe i'm wrong ;) )

还有其他解决方案吗?

推荐答案

在这种情况下，无需使用ref.

There is no need to use refs in this case.

惯用的方法是将表单字段创建为受控组件通过提供value属性.可以从全局状态(映射到您的mapStateToProps中)提供，也可以从公共父组件的状态提供.

The idiomatic approach would be to create your form fields as controlled components by supplying the value property. This could either be supplied from the global state (mapped in your mapStateToProps), or from the state of the common parent component.

您还需要聆听输入的更改.为此，请为input的onChange道具提供处理程序.然后，此处理程序应根据您采用的方法，在您的redux存储区或组件状态下更改表单数据.

You will also need to listen to changes of the inputs. For that, supply a handler to the onChange prop of your input. This handler should then change the form data, either in your redux store or in the component state, depending on which approach you take.

通过这种方式，只要可以访问表单数据，在反应应用程序中的何处放置提交按钮等都无关紧要.

This way, it does not matter where in your react application you place your submit button etc., as long as it has access to the form data.

有关您的用例的工作示例，请查看此JSBin .这说明了如何将表单分为多个组件，并在不依赖ref的情况下将输入值保留在redux存储中.

For a working example of your use case, have a look at this JSBin. This demonstrates how you could separate your form into multiple components and keep the input values in your redux store without relying on refs.

这篇关于React + Redux:提交多组件表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！