Redux form stateless component submit method

Question

Is it ok to have a stateless component like this or should I transform it to statefull component?

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)
);

I also wanted to avoid binding in form submit and created this

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

What is a better approach in this situation?

Answer 1

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