Created
January 7, 2016 00:33
-
-
Save adailey14/24d080b3b93c46740ab2 to your computer and use it in GitHub Desktop.
Simple Example showing how initialValues trigger 2 renders
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {Component, PropTypes} from 'react'; | |
import {reduxForm} from 'redux-form'; | |
const fields = ['firstName', 'lastName', 'email', 'sex', 'favoriteColor', 'employed', 'notes']; | |
class SimpleForm extends Component { | |
static propTypes = { | |
fields: PropTypes.object.isRequired, | |
handleSubmit: PropTypes.func.isRequired, | |
resetForm: PropTypes.func.isRequired, | |
submitting: PropTypes.bool.isRequired | |
}; | |
render() { | |
console.log('RENDERING SIMPLE FORM, is Value set?', this.props.fields.firstName.value); | |
const { | |
fields: {firstName, lastName, email, sex, favoriteColor, employed, notes}, | |
handleSubmit, | |
resetForm, | |
submitting | |
} = this.props; | |
return (<form onSubmit={handleSubmit}> | |
<div> | |
<label>First Name</label> | |
<div> | |
<input type="text" placeholder="First Name" {...firstName}/> | |
</div> | |
</div> | |
<div> | |
<label>Last Name</label> | |
<div> | |
<input type="text" placeholder="Last Name" {...lastName}/> | |
</div> | |
</div> | |
<div> | |
<label>Email</label> | |
<div> | |
<input type="email" placeholder="Email" {...email}/> | |
</div> | |
</div> | |
<div> | |
<label>Sex</label> | |
<div> | |
<label> | |
<input type="radio" {...sex} value="male" checked={sex.value === 'male'}/> Male | |
</label> | |
<label> | |
<input type="radio" {...sex} value="female" checked={sex.value === 'female'}/> Female | |
</label> | |
</div> | |
</div> | |
<div> | |
<label>Favorite Color</label> | |
<div> | |
<select {...favoriteColor}> | |
<option></option> | |
<option value="ff0000">Red</option> | |
<option value="00ff00">Green</option> | |
<option value="0000ff">Blue</option> | |
</select> | |
</div> | |
</div> | |
<div> | |
<label> | |
<input type="checkbox" {...employed}/> Employed | |
</label> | |
</div> | |
<div> | |
<label>Notes</label> | |
<div> | |
<textarea | |
{...notes} | |
value={notes.value || ''} // required for reset form to work (only on textarea's) | |
// see: https://github.com/facebook/react/issues/2533 | |
/> | |
</div> | |
</div> | |
<div> | |
<button disabled={submitting} onClick={handleSubmit}> | |
{submitting ? <i/> : <i/>} Submit | |
</button> | |
<button disabled={submitting} onClick={resetForm}> | |
Clear Values | |
</button> | |
</div> | |
</form> | |
); | |
} | |
} | |
export default reduxForm({ | |
form: 'simple', | |
fields: fields, | |
})(SimpleForm); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {Component, PropTypes} from 'react'; | |
import SimpleForm from './SimpleForm'; | |
const initialValues = { | |
firstName: 'Andrew', | |
lastName: 'Andrew', | |
email: '[email protected]', | |
sex: 'Andrew', | |
favoriteColor: 'Andrew', | |
employed: 'Andrew', | |
Notes: 'Andrew' | |
}; | |
export default class SimpleFormConsumer extends Component { | |
constructor() { | |
super(); | |
this.state = {showForm: false}; | |
} | |
render() { | |
const { showForm } = this.state; | |
return ( | |
<div> | |
<div onClick={() => this.setState({showForm: !this.state.showForm})}>Click to toggle showing form</div> | |
{showForm && ( | |
<SimpleForm initialValues={initialValues} /> | |
)} | |
</div> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment