Instantly share code, notes, and snippets.

Embed
What would you like to do?
The source code for the redux form tutorial on davidmeents.com
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import * as actions from '../../actions';
const form = reduxForm({
form: 'ReduxFormTutorial',
validate
});
const renderField = field => (
<div>
<input {...field.input}/>
{field.touched && field.error && <div className="error">{field.error}</div>}
</div>
);
class ReduxFormTutorial extends Component {
componentDidMount() {
this.handleInitialize();
}
handleInitialize() {
const initData = {
"firstName": this.props.currentUser.firstName,
"lastName": this.props.currentUser.lastName,
"sex": this.props.currentUser.sex,
"email": this.props.userEmail,
"phoneNumber": this.props.currentUser.phoneNumber
};
this.props.initialize(initData);
}
handleFormSubmit(formProps) {
this.props.submitFormAction(formProps);
}
render(
const { handleSubmit } = this.props;
return (
<div>
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<label>First Name:</label>
<Field name="firstName" type="text" component={renderField}/>
<label>Last Name:</label>
<Field name="lastName" type="text" component={renderField}/>
<label>Gender:</label>
<Field name="sex" component="select">
<option></option>
<option name="Male">Male</option>
<option name="Female">Female</option>
</Field>
<label>Email:</label>
<Field name="email" type="email" component={renderField} />
<label>Phone:</label>
<Field name="phoneNumber" type="tel" component={renderField}/>
<button action="submit">Save changes</button>
</form>
</div>
)
)
}
function validate(formProps) {
const errors = {};
if (!formProps.firstName) {
errors.firstName = 'Please enter a first name';
}
if (!formProps.lastName) {
errors.lastName = 'Please enter a last name';
}
if (!formProps.email) {
errors.email = 'Please enter an email';
}
if (!formProps.phoneNumber) {
errors.phoneNumber = 'Please enter a phone number'
}
return errors;
}
function mapStateToProps(state) {
return {
user: state.user
};
}
export default connect(mapStateToProps, actions)(form(ReduxFormTutorial));
@frantisek-lechner

This comment has been minimized.

frantisek-lechner commented Aug 10, 2016

Could you add a definition of actions please?

@shawnsnyder

This comment has been minimized.

shawnsnyder commented Sep 1, 2016

does this get through babel for you? the open paren has me confused on line 41. not sure if this is some sort of of es2018 sugar or something.

@vivekkumar1989

This comment has been minimized.

vivekkumar1989 commented Sep 23, 2016

I tried to use this but i am getting this error handleSubmit is not a function.

@anthonybrown

This comment has been minimized.

anthonybrown commented Oct 6, 2016

I think there's a typo, should be handleFormSubmit or change the name to handleSubmit?

@itditp

This comment has been minimized.

itditp commented Dec 20, 2016

render(){
const { handleSubmit } = this.props;

	return (
		<div>
		<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>

		<label>First Name:</label>
		<Field name="firstName" type="text" component={renderField}/>

		<label>Last Name:</label>
		<Field name="lastName" type="text" component={renderField}/>

		<label>Gender:</label>
		<Field name="sex" component="select">
		<option></option>
		<option name="Male">Male</option>
		<option name="Female">Female</option>
		</Field>

		<label>Email:</label>
		<Field name="email" type="email" component={renderField} />

		<label>Phone:</label>
		<Field name="phoneNumber" type="tel" component={renderField}/>

		<button action="submit">Save changes</button>
		</form>
		</div>
	);
}
@Flavien-Pensato

This comment has been minimized.

Flavien-Pensato commented Dec 22, 2016

Great job dmeents!

I would like to see your actions file about how you use dispatch. Thanks

Flav

@jamesmwali

This comment has been minimized.

jamesmwali commented May 23, 2017

I tried to use this but i am getting an error saying handleSubmit is not a function.

@jgardezi

This comment has been minimized.

jgardezi commented Feb 1, 2018

Just found another way to initialise form values

const form = reduxForm({ form: 'debitForm', validate, initialValues: { field_name: 'field_initial_value', }, });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment