在 redux 表单隐藏字段中使用参数

Question

我希望在 redux 中为 auth 应用程序添加重置密码功能。服务器发出一封电子邮件并将令牌放入参数中。我正在尝试使用隐藏字段来存储需要提交回服务器的参数值。问题是 redux 表单似乎没有获取值并且正在传递未定义的值。我对 redux 形式有点陌生，知道这还不是 v6。我的计划是先获得授权的所有功能，然后再升级

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import * as actions from '../../actions';

class Resetpassword extends Component {

  componentWillMount() {
    this.props.clearErrorMsg();
  }

  handleFormSubmit(formProps) {
    // Call action creator to sign up the user!
    this.props.resetPassword(formProps);
  }

  renderAlert() {
    if (this.props.errorMessage) {
      return (
        <div className="alert alert-danger">
          <strong>Oops!</strong> {this.props.errorMessage}
        </div>
      );
    }
  }

  render() {
    const { handleSubmit, fields: { password, passwordConfirm, token }} = this.props;
    console.log(this.props.location.query.reset);
    return (
      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
        <fieldset className="form-group">
          <label>Password:</label>
          <input className="form-control" {...password} type="password" />
          {password.touched && password.error && <div className="error">{password.error}</div>}
        </fieldset>
        <fieldset className="form-group">
          <label>Confirm Password:</label>
          <input className="form-control" {...passwordConfirm} type="password" />
          {passwordConfirm.touched && passwordConfirm.error && <div className="error">{passwordConfirm.error}</div>}
        </fieldset>
        <input className="form-control"  value={this.props.location.query.reset} {...token} type="hidden" />
        {this.renderAlert()}
        <button action="submit" className="btn btn-primary">Sign up!</button>
      </form>
    );
  }
}

function validate(formProps) {
  const errors = {};

  if (!formProps.password) {
    errors.password = 'Please enter a password';
  }

  if (!formProps.passwordConfirm) {
    errors.passwordConfirm = 'Please enter a password confirmation';
  }

  if (formProps.password !== formProps.passwordConfirm) {
    errors.password = 'Passwords must match';
  }

  return errors;
}

function mapStateToProps(state) {
  return { errorMessage: state.auth.error };
}

export default reduxForm({
  form: 'resetpassword',
  fields: ['password', 'passwordConfirm','token'],
  validate
}, mapStateToProps, actions)(Resetpassword);

Answer 1

我发现的可能不符合最佳实践的解决方案是删除隐藏字段并将查询字符串 prop 传递到操作 handleFormSubmit

handleFormSubmit(formProps) {
// Call action creator to sign up the user!
this.props.resetPassword(formProps,this.props.location.query.reset);}

然后让动作处理它

在 redux 表单隐藏字段中使用参数

Using param in redux form hidden field

redux

redux-form