传递动态表单值 redux-form

Question

我有一个名为 profileDetails 的道具，我想用它来设置表单值。是一种以 redux 形式动态添加 multiple 表单值的方法吗？

我尝试了 values: this.props.profileDetails 和 values: profileDetails 我都得到了 Uncaught ReferenceError: <variable> is not defined。

编辑：我尝试在 reduxForm({}) 中使用 values: ... 和 initialValues: ...。

import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { InputField } from '~/shared/components/formFields';

const ProfileEditComponent = ({
  handleSubmit,
  profileDetails,
 }) => (
  <form onSubmit={handleSubmit} className="form-horizontal">
  <Field
    name="first_name"
    type="text"
    component={InputField}
    label="First Name"
    labelClass="col-sm-2"
    inputDivClass="col-sm-10"
    value={profileDetails.first_name}
  />
  </form>
);

export default reduxForm({
  form: 'profile-edit-form',
  destroyOnUnmount: false,
  enableReinitialize: true,
  value: profileDetails // <-- how do I pass profileDetails dynamically?
})(ProfileEditComponent);


// Input component

import React from 'react';
import PropTypes from 'prop-types';

const InputField = ({ ...props }) => (
  <div className="form-group">
    <label
      htmlFor={props.input.name}
      id={props.input.name}
      className={props.labelClass}
    >
      {props.label}
    </label>
    <div className={props.inputDivClass}>
      <input
        type={props.type}
        name={props.input.name}
        className="form-control"
        value={props.input.value}
        {...props.input}
      />
    </div>
  </div>
);

InputField.propTypes = {
  type: PropTypes.string,
  name: PropTypes.string,
  value: PropTypes.string,
  input: PropTypes.shape(),
  label: PropTypes.string,
  labelClass: PropTypes.string,
  inputDivClass: PropTypes.string,
};

InputField.defaultProps = {
  type: '',
  name: undefined,
  value: undefined,
  input: {},
  label: '',
  labelClass: '',
  inputDivClass: '',
};

export default InputField;

Answer 1

您需要像您一样使用 redux 表单初始化您的表单，并且您必须 connect() 您的表单与 reducer 中的数据。

像这样：

const InitializeProfileEditComponent = reduxForm({
  form: 'profile-edit-form',
  destroyOnUnmount: false,
  enableReinitialize: true,
})(ProfileEditComponent);

const ProfileEditForm = connect(
  state => ({
    initialValues: state.profileDetail, // state in your redux store
  })
)(InitializeProfileEditComponent)

export default ProfileEditForm;

希望对您有所帮助https://redux-form.com/7.1.2/examples/initializefromstate/

Answer 2

如果您已经知道要将什么值放入哪种形式，则可以使用 redux-form 中的 initialValues。

在你的情况下你想给一个道具作为价值所以你需要通过 mapStateToProps 传递它

像这样:

function mapStateToProps(state, ownProps) {
  return {
    initialValues: {
      first_name: ownProps.propThatHasFirstName
    }
}


export default reduxForm({
  form: 'profile-edit-form',
  destroyOnUnmount: false,
  enableReinitialize: true,
})(ProfileEditComponent);

传递动态表单值 redux-form

Passing dynamic form values redux-form

reactjs

redux

redux-form

react-redux