Question

我在使用redux-form和＆＃39; initialValues＆＃39;初始化表单时遇到了麻烦。道具。我阅读了很多帖子（例如here）并且我没有设法让它发挥作用......

我看到我的initialValues已正确设置，但我的字段未更新...可能问题出在我的renderBasicField函数中，但我不知道如何解决这个问题。

否则它也可能是在渲染组件时尚未填充道具...但我不知道如何使其工作，因为我必须依靠mapStateToProps来提供它。 / p>

我看到很多关于这类问题的帖子，不幸的是，我已经将enableReinitialize属性设置为true：）

这是我的代码：

// My component
class ProfileForm extends React.Component {

  render () {
    console.log(this.props);
    const { handleSubmit } = this.props;
    const messageClassname = this.props.errorMessage !== undefined ? stylesShared.errorMessage : this.props.confirmationMessage !== undefined ? stylesShared.confirmationMessage : '';
    return (
      <div>
        <div>
          <div>
            <form onSubmit={handleSubmit(this.props.onSubmitProfileUpdate)}>
              <div>
                <h4>Votre profil</h4>
              </div>
              <div className={messageClassname}>
                {this.props.errorMessage &&
                <span>{this.props.errorMessage}</span>
                }
                {this.props.confirmationMessage &&
                <span>{this.props.confirmationMessage}</span>
                }
              </div>
              <div>
                <Field name='firstname' type='text' label='Prénom' component={renderBasicField} />
              </div>
              <div>
                <Field name='lastname' type='text' label='Nom' component={renderBasicField} />
              </div>
              <div>
                <Field name='email' type='email' label='Email' addon='@' component={renderBasicField} />
              </div>
              <div>
                <Field name='telephone' type='text' label='Téléphone' component={renderBasicField} />
              </div>
              <div>
                <Field name='ranking' className='input-row form-group form-control' options={this.getTennisRankingsOptions()} type='select' component={renderSelectField} />
              </div>
              <div>
                <Field name='city' type='text' label='Ville' component={renderBasicField} />
              </div>
              <div>
                <button className='btn btn-info btn-lg center-block' type='submit'>Mettre à jour</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

const reduxFormDecorator = reduxForm({
  form: 'profile',
  enableReinitialize: true,
  validate: validateProfileForm
});

const mapStateToProps = (state) => {
  return {
    initialValues: state.userConnection.loadProfile.user
  };
};

const reduxConnector = connect(
  mapStateToProps,
  null
);

export default reduxConnector(reduxFormDecorator(ProfileForm));

渲染我的字段的代码：

// My renderFunction
export const renderBasicField = ({input, meta: {touched, error}, label, type='text', id, addon, styleClasses, handleChange, controlledAsyncValue}) => {
  const inputStyles = getInputStyles(input.value, touched, error);
  if (controlledAsyncValue !== input.value) {
    input.value = controlledAsyncValue;
    input.onChange(input.value);
  }
  return (<div className={inputStyles.container}>
    {displayInputLabel(inputStyles.input.idInput, label)}
    <div className={addon && 'input-group'}>
      {addon && <span className='input-group-addon'>{addon}</span>}
      <input
        {...input}
        className={classNames(styles.basicInputField, styleClasses)}
        id={id}
        value={input.disabled ? '' : input.value}
        onChange={getOnChangeAction(input.onChange, handleChange)}
        placeholder={label}
        type={type}
        aria-describedby={inputStyles.input.ariaDescribedBy}
      />
    </div>
    {touched && error &&
    displayErrorMessage(error)}
  </div>);
};

我想知道我是否使用自定义renderBasicField函数忽略initialValue但在这种情况下，我会检索此值来设置输入吗？

非常感谢你的帮助！：）

Answer 1

尝试切换连接和表单装饰器。它应该有所帮助。

export default reduxFormDecorator(reduxConnector(ProfileForm));

使用redux-form初始化我的表单

1 个答案: