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.