Question

我希望在redux中为auth应用添加重置密码功能。服务器发送一封电子邮件并将令牌放入params。我试图使用隐藏字段来存储需要提交回服务器的参数值。问题是redux形式似乎没有获得值并且传递未定义。我对redux形式不太熟悉，并知道这还不是第6版。我的计划是首先构建auth的所有功能然后升级

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形式的隐藏字段中使用param

1 个答案: