Skip to content

Instantly share code, notes, and snippets.

@michaelmcshinsky
Last active October 18, 2019 12:41
Show Gist options
  • Save michaelmcshinsky/cfef687ea34fd99e2429dc82a54502cf to your computer and use it in GitHub Desktop.
Save michaelmcshinsky/cfef687ea34fd99e2429dc82a54502cf to your computer and use it in GitHub Desktop.
optimizing-state-change-in-react
import React from 'react';
export class SignUpForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
email: ''
};
}
handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
handleSubmit = event => {
event.preventDefault();
// handle and submit form data to server
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<fieldset>
<div>
<label htmlFor='formName'>Name:</label>
<input
id='formName'
name='name'
type='text'
value={this.state.name}
onChange={this.handleChange}
/>
</div>
<div>
<label htmlFor='formEmail'>Email:</label>
<input
id='formEmail'
name='email'
type='text'
value={this.state.email}
onChange={this.handleChange}
/>
</div>
</fieldset>
<button type='submit'>Submit</button>
</form>
);
}
}
/**
* Set the state for a key value pair from an event.
*
* @param {object} event The event object.
* @returns {void}
*/
handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
handleTextChange = event => {
this.setState({ [event.target.name]: event.target.type });
};
handleCheckboxChange = event => {
this.setState({ [event.target.name]: event.target.checked });
};
handleRadioChange = event => {
this.setState({ [event.target.name]: event.target.checked });
};
handleChange = event => {
let value =
e.target.type === 'checkbox' || e.target.type === 'radio'
? e.target.checked
: e.target.value;
this.setState({ [event.target.name]: value });
};
// <input type="file" onChange={this.handleChange} />
handleChange = event => {
if (event.target.type === 'file') {
let file = event.target.files[0];
// Manipulate file for server upload.
// Call another function from this point if needed.
} else {
let value =
e.target.type === 'checkbox' || e.target.type === 'radio'
? e.target.checked
: e.target.value;
this.setState({ [event.target.name]: value });
}
};
/*
* Maybe our form object is an object within state.
* <input type="text" onChange={(event) => this.handleChange(event, 'formObj') } />
*
* Note: We are not accounting for instances when key or state.key may be undefined.
*/
handleChange = (event, key) => {
// Multilevel
let state = this.state;
state[key][name] = event.target.value;
this.setState(state);
}
// Create a handleChange function to receive event and possible options from an input function.
const handleChange = (event, key, callback) => {
let obj = {};
// Setup a name from the event.
// Default to value so you can debug a naming error when looking at state :)
let name = event.target.name ? event.target.name : event.target.value;
let value =
e.target.type === 'checkbox' || e.target.type === 'radio'
? e.target.checked
: e.target.value;
if (event.target.type === 'file') {
value = event.target.files[0];
}
if (key) {
obj[key][name] = value;
} else {
obj[name] = value;
}
if (callback && typeof callback === 'function') {
callback(obj);
} else {
return obj;
}
};
/*
* Use Case #1
* let state = handleChange(event, 'child');
* this.setState(state);
*
* Use Case #2
* handleChange(event, null, () => {// do something});
*
* Have an optimization for this function? Let me know!
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment