Question

是否可以拥有这样的无状态组件，还是应该将其转换为有状态组件？

import React from "react";
import { Field, reduxForm } from "redux-form";
import { connect } from "react-redux";
import RaisedButton from 'material-ui/RaisedButton';
import { Link } from 'react-router-dom';
import { signUpUser } from "../actions/index.js";
import { SIGN_IN } from '../constants/routes';
import { renderTextField } from '../helpers/reduxFormField';


const signUp = (signUpUser, values) => {
  signUpUser(values);
};


const  SignUp = ({ handleSubmit, signUpUser }) => {

  return(
    <div className="container">
      <div className="">
        <h2 className="text-center">Sign Up</h2>
        <form onSubmit={handleSubmit(signUp.bind(null, signUpUser))}>
          <Field name="email" component={renderTextField} label="Email" type="email" />
          <Field name="password" component={renderTextField} label="Password" type="password" />
          <Field name="confirmPassword" component={renderTextField} label="Confirm password" type="password" />
          <RaisedButton type="submit" label="Sign Up" className="button-submit" primary={true} />
          <Link to={SIGN_IN} className="btn">
            Already a member{'?'} yet Log in
          </Link>
        </form>
      </div>
    </div>
  )
}

export default connect(null, { signUpUser })(
  reduxForm({
    form: "signUp",
    validate: validate
  })(SignUp)
);

我还想避免在表单提交中绑定并创建此

<form onSubmit={handleSubmit((values) => signUpUser(values)}>

在这种情况下，有什么更好的方法？

Answer 1

Connect应与容器一起使用，而不是功能组件： https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Redux形成无状态组件提交方法

1 个答案: