The controlled components
The React component’s state becomes the “only data source,” and the component also controls what happens to the form during user input. This is called a “managed component.”
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: "" };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
alert("Name submitted:" + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>Name:<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>); }}Copy the code
textarea
In React, <textarea> uses the value attribute instead. This makes a form with <textarea> very similar to a form with a single line input:
<form onSubmit={this.handleSubmit}>
<label>Article:<textarea value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
Copy the code
select
React does not use the selected attribute. Instead, it uses the value attribute on the root SELECT tag. This is easier in controlled components because you only need to update it in the root tag. Such as:
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: "coconut" };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
alert("Which flavor do you prefer?" + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>Choose your favorite flavor:<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">grapefruit</option>
<option value="lime">lime</option>
<option value="coconut">coconut</option>
<option value="mango">Mango.</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>); }}Copy the code
Arrays can be passed to the value property to support multiple options in the SELECT tag:
<select multiple={true} value={['B'.'C']} >Copy the code
In general, this makes tags like <input type=”text”>, <textarea>, and < SELECT > all very similar — they all accept a value attribute.
input type=”file”
In HTML, <input type=”file”> allows the user to select one or more files from a storage device, upload them to a server, or control them using JavaScript’s File API.
<input type="file" />
Copy the code
Because its value is read-only, it is an uncontrolled component in React.
Processing multiple inputs
When you need to process multiple input elements, add the name attribute to each element and let the handler select it based on the value of event.target.name:
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true.numberOfGuests: 2};this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.name === "isGoing" ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value,
});
}
render() {
return (
<form>
<label>Participate in:<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange}
/>
</label>
<br />
<label>Number of guests:<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange}
/>
</label>
</form>); }}Copy the code
summary
Uncontrolled components are another way to implement input forms when controlled components do not meet business requirements or become cumbersome because of business requirements.