React form, list

List

[Keys]
　　keys can help React to identify which elements have changed in certain DOM elements are added or deleted when. It should therefore be given a certain identifier to each element of the array.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

  A key element of the best is a unique string that has this element in the list. Typically, as the key data from the id element. When the element is not determined id, sequence numbers may be used as an index index key.

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);

[Note] If the list can be reordered, we do not recommend using an index to sort, because it would lead to rendering becomes very slow.
JSX allows embedding any expression in braces.

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />

      )}
    </ul>
  );
}

Forms

[Controllable and uncontrollable component assembly]
　　in the React input标签are some of the pits, inputitself has its own caching mechanism, then React is statealso caching mechanism, like <input>, <textarea>and <select>this type of form elements will maintain their own state, and according to user enter updated. React However, the variable state is usually kept in a state of assembly property, and can only be updated with the setState () method. Both our caching mechanisms in the code is to be trade-offs. The inputin valuebinding to statethe component is controlled React assembly, and vice versa is not controllable 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('A name was 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>
    );
  }
}

Since the valueproperty is provided on the form element, the value will always be displayed on the data source React this.state.valuevalue. Because each key triggers handleChangeto update the current React state, the value shown will vary depending on user input and update.

Advantage controllable components:
meet React way data flow characteristics, i.e., from statethe flow of renderresult output from the data stored in statethe easy access and processing.

[Textarea]
　　in which HTML, <textarea>element to define its child nodes by text content. React in the, <textarea>will use valueproperty instead, this is the case, the form of <textarea>a form very similar to the single-line input:

<textarea value={this.state.value} onChange={this.handleChange} />

[Select]
　　in the React, do not use the previous selectedproperty, and in 根select标签the use valueattribute to indicate the selected item. This is more convenient in a controlled assembly, since only one place to update components.

<select value={this.state.value} onChange={this.handleChange}>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
</select>

[More] input
　　have when dealing with multiple controlled input element, by adding to each element of a nameproperty to let handler according event.target.nameto the value of the choice of what to do.

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.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <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>
    );
  }
}