React Forms and User Input
Controlled Components
Controlled form components are defined with a value property. The value of controlled inputs is managed by React, user inputs will not have any direct influence on the rendered input. Instead, a change to the value property needs to reflect this change.
class Form extends React.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.state = {
name: ''
};
}
onChange(e) {
this.setState({
name: e.target.value
});
}
render() {
return (
<div>
<label for='name-input'>Name: </label>
<input
id='name-input'
onChange={this.onChange}
value={this.state.name} />
</div>
)
}
}The above example demonstrates how the value property defines the current value of the input and the onChange event handler updates the component's state with the user's input.
Form inputs should be defined as controlled components where possible. This ensures that the component state and the input value is in sync at all times, even if the value is changed by a trigger other than a user input.