Руководство ReactJS Form

View more Tutorials:

Pуководства ReactJS

Form Input
Form textarea
Form select/option

В HTML, элементы у Form как <input>, <textarea>, <select> сами управляют своими статусами, их статусы могут поменяться из-за влияния пользователя.

В основном данные у Form будут напрямую отправлены к Server, когда пользователь нажимает на кнопку Submit. Но если вы хотите управлять поведением данных у Form с помощью React, вам нужно создать двустороннюю связь между значениями элементов Form и статусом React.

1- Form Input

Ниже является простой пример с элементом <input>, значение данного элемента прикреплено от this.state.fullName (Статус управляемый в Component). Когда кто-то меняет значение у <input>, данное значение должно быть обновлено для this.state.fullName через метод setState().

form-input-example.jsx

class SimpleForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fullName: ""
    };
  }

  handleSubmitForm(event) {
    alert("Full Name: " + this.state.fullName);
    event.preventDefault();
  }

  handleChange(event) {
    var value = event.target.value;

    this.setState({
      fullName: value
    });
  }

  render() {
    return (
      <form onSubmit={event => this.handleSubmitForm(event)}>
        <label>
          Full Name:
          <input
            type="text"
            value={this.state.fullName}
            onChange={event => this.handleChange(event)}
          />
        </label>
        <input type="submit" value="Submit" />
        <p>{this.state.fullName}</p>        
      </form>
    );
  }
}

// Render
ReactDOM.render(<SimpleForm />, document.getElementById("form1"));

form-input-example.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Form</title>
      <script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
     
   </head>
   <body>
      <h3>Form Input:</h3>

      <div id="form1"></div>

      <script src="form-input-example.jsx" type="text/babel"></script>

   </body>
</html>

2- Form textarea

В HTML, отличается от элемента <input>, элемент <textarea> позволяет пользователю вводить содержание текста длиннее и сложнее, содержание текста у <textarea> является его подэлементом (Данный подэлемент является #text Node).

<textarea>
  Hello there, this is some text in a text area
</textarea>

В React, содержание текста <textarea> будет настроено через свойство value вместо #text Node. Таким образом в React способ использования <textarea> ничем не отличается от <input>.

form-textarea-example.jsx

class EssayForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      content: ""
    };
  }

  handleSubmitForm(event) {
    alert("Textarea Content: " + this.state.content);
    event.preventDefault();
  }

  handleChange(event) {
    var value = event.target.value;

    this.setState({
      content: value
    });
  }

  render() {
    return (
      <form onSubmit={event => this.handleSubmitForm(event)}>
        <label>Content</label>
        <br />
        <textarea cols="45" rows="5"
          value={this.state.content}
          onChange={event => this.handleChange(event)} />
        <br />
        <input type="submit" value="Submit" />
        <p>{this.state.content}</p>
      </form>
    );
  }
}

// Render
ReactDOM.render(<EssayForm />, document.getElementById("form1"));

form-textarea-example.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Form textarea</title>
      <script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

   </head>
   <body>
      <h3>Form textarea:</h3>

      <div id="form1"></div>

      <script src="form-textarea-example.jsx" type="text/babel"></script>

   </body>
</html>

3- Form select/option

form-select-example.jsx

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      favoriteFlavor: "coconut"
    };
  }

  handleSubmitForm(event) {
    alert("Favorite Flavor: " + this.state.favoriteFlavor);
    event.preventDefault();
  }

  handleChange(event) {
    var value = event.target.value;

    this.setState({
      favoriteFlavor: value
    });
  }

  render() {
    return (
      <form onSubmit={event => this.handleSubmitForm(event)}>
        <p>Pick your favorite flavor:</p>
        <select
            value={this.state.favoriteFlavor}
            onChange={event => this.handleChange(event)}>
          <option value="grapefruit">Grapefruit</option>
          <option value="lime">Lime</option>
          <option value="coconut">Coconut</option>
          <option value="mango">Mango</option>
        </select>

        <input type="submit" value="Submit" />
      </form>
    );
  }
}

// Render
ReactDOM.render(<FlavorForm />, document.getElementById("form1"));

form-select-example.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Form select/option</title>
      <script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

   </head>
   <body>
      <h3>Form select/option:</h3>

      <div id="form1"></div>

      <script src="form-select-example.jsx" type="text/babel"></script>

   </body>
</html>

View more Tutorials:

Pуководства ReactJS