reactjs – 动作创建者没有在“this.props”中显示redux-form 6.

发布时间：2020-12-15 05:05:52 所属栏目：百科来源：网络整理

导读：当我使用redux-form 5.3.1时,我能够访问我的动作创建者.但是当我需要Material-UI时,我将其更新为6.0.0-rc.3. 从5.3.1更改为6.0.0：从render()中删除了字段： const {handleSubmit,fields：{email,password,passwordConfirm}} = this.props; 从输入中删除错

当我使用redux-form 5.3.1时,我能够访问我的动作创建者.但是当我需要Material-UI时,我将其更新为6.0.0-rc.3.

从5.3.1更改为6.0.0：

>从render()中删除了字段：

const {handleSubmit,fields：{email,password,passwordConfirm}} = this.props;

>从输入中删除错误验证：

{email.touched&& email.error&& < div className =“error”> {email.error}< / div>}

>从导出默认值中删除字段数组：

export default reduxForm({
形式：’注册’,
字段：[’email’,’password’,’passwordConfirm’],
验证
},mapStateToProps,actions)(注册);

>为Material-UI组件添加了包装器：

从’../material-ui-wrapper’导入{renderTextField,renderCheckbox,renderSelectField,renderDatePicker};

码：

1 – console.log(this.props)不记录任何动作创建者 – 应该记录signupUser函数

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

import { renderTextField } from '../material-ui-wrapper';

import {Card,CardActions,CardHeader,CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';

class Signup extends Component {
  handleFormSubmit(formProps) {
    console.log(this.props);
    this.props.signupUser(formProps);
  }

  renderAlert() {
    if (this.props.errorMessage) {
      return (
        <div className="error">
          {this.props.errorMessage}
        </div>
      );
    }
  }

  render() {
    const { handleSubmit,pristine,submitting } = this.props;
    return (
      <form id="form" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
        <Card>
          <CardHeader title="Cadastre-se"/>
          <CardText>
            <Field name="email" component={renderTextField} label={"Email"} fieldType="text"/>
            <Field name="password" component={renderTextField} label={"Senha"} fieldType="password"/>
            <Field name="passwordConfirm" component={renderTextField} label={"Confirma??o de senha"} fieldType="password"/>
            {this.renderAlert()}
          </CardText>
          <CardActions>
            <FlatButton type="submit" label="Criar!"/>
          </CardActions>
        </Card>
      </form>
    );
  }
}

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

  if (!formProps.email || !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(formProps.email)) {
    errors.email = 'Por favor,informe um email válido';
  }

  if (formProps.password !== formProps.passwordConfirm) {
    errors.password = 'Senhas devem ser iguais.';
  }

  if (!formProps.password) {
    errors.password = 'Por favor,informe uma senha.';
  }

  if (!formProps.passwordConfirm) {
    errors.passwordConfirm = 'Por favor,confirme a sua senha.';
  }

  return errors;
}

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

export default reduxForm({
  form: 'signup',validate
},actions)(Signup);

编辑

更改：

export default reduxForm({
形式：’注册’,actions)(注册);

至：

有效.这是解决这个问题最正确的方法吗？

代替：

export default reduxForm({
  form: 'signup',actions)(Signup);

使用：

Signup = reduxForm({
form: 'signup',validate})(Signup);

export default Signup = connect(mapStateToProps,actions)(Signup);

PS：可能是一个解决方案

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!