Create a gist now

Instantly share code, notes, and snippets.

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

Could you add a definition of actions please?

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.

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

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

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

Great job dmeents!

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

Flav

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

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