Cодержание

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

View more Tutorials:

В  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/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/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/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/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/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/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: