尝试将 redux-form 与功能组件重用

Question

我正在尝试构建一个可重用的组件来创建简单的表单，进行验证并处理提交操作。我可以自己使用它，但是当我尝试制作一个功能组件来注入道具时，我陷入了这个错误。

该类使用组件来构建表单

import React from 'react';
import CustomReduxForm from './CustomReduxForm';

class LoginForm extends React.Component {
  getFields() {
    return [
      {
        name : 'username',
        type : 'text',
        label : 'User',
        mandatory : true
      },
      {
        name : 'password',
        type : 'password',
        label : 'Password',
        mandatory : true
      }
    ];
  }

  handleFormSubmit(values) {
    console.log(values)
  }

  render() {
    return (
      <div>
        <div>Test</div>
        <CustomReduxForm
          formName="LoginForm"
          fields={this.getFields()}
          onSubmit={this.handleFormSubmit}
        />
      </div>
    );
  }
}

export default LoginForm;

这是构建表单的组件

import React from 'react';
import { reduxForm, Field } from 'redux-form';

function CustomReduxForm(props) {

  class CustomForm extends React.Component {
    render() {
      const { handleSubmit } = this.props;
      return (
        <div style={{ margin: '30px' }}>
          <form onSubmit={handleSubmit(props.onSubmit)}>
            {fields.map(myField => renderFieldset(myField))}
            <button className="btn btn-primary" type="submit">Submit</button>
          </form>
        </div>
      );
    }
  }

  const renderInput = field => {
    return (
        <div className={`form-group ${field.meta.touched && field.meta.invalid ? 'has-danger' : ''}`}>
          <input
            {...field.input}
            type={field.type}
            className="form-control"
          />

          {field.meta.touched && field.meta.error && <div className="text-help">{field.meta.error}</div>}
       </div>
    );
  }

  const renderFieldset = customField => {
      return (
        <div>
          <label htmlFor={customField.name}>{customField.label}</label>
          <Field
            name={customField.name}
            component={renderInput}
            type={customField.type} />
        </div>
      );
  }

  const validate = values => {
    const errors = {}

    props.fields.forEach((customField) =>
    {
      if(customField.mandatory && ! values[customField.name]) {
        errors[customField.name] = `You must enter a valid value for ${customField.label}!`;
      }
    });

    return errors
  }

  return reduxForm({
    form: props.formName,
    validate
  })(CustomForm);

};

export default CustomReduxForm;

我已经尝试了不同的方法来导出 CustomReduxForm 上创建的表单，但仍然一无所获！

return reduxForm({
  form: props.formName,
  validate
})(CustomForm);

// or

const FormWrapped = reduxForm({
  form: props.formName,
  validate
})(CustomForm);

// Non sense, but ..
return FormWrapped;

// or
return <FormWrapped />;

谢谢！

Answer 1

问题是 的 return 语句CustomReduxForm。

正确的方法是将其分配给一个变量并使用 JSX 语法，就像您在上一个片段中所做的那样。

const WrappedForm = reduxForm(...)(CustomForm);
return <WrappedForm />

你唯一错过的就是将 的 props 传递CustomReduxForm给WrappedForm.

你需要使用return <WrappedForm {...props} />

现在的问题是修复代码中的其他错误，例如......

const { fields, handleSubmit } = this.props

而不是使用const renderFieldset和做{fields.map(myFieldset => renderFieldset(myFieldset)

const Fieldset = ...那么你可能想使用{fields.map((myFieldset, index) => <Fieldset key={index} />)}

现在它应该按预期工作。