openplanning

Hướng dẫn và ví dụ ReactJS Form

Xem thêm các chuyên mục:

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook
Trong HTML, các phần tử của Form như <input>, <textarea>, <select> tự quản lý các trạng thái của chúng, trạng thái của chúng có thể thay đổi do tác động của người dùng.
Về cơ bản dữ liệu của Form sẽ được trực tiếp gửi đến Server khi người dùng nhấn vào nút Submit. Nhưng nếu bạn muốn kiểm soát hành vi và dữ liệu của Form bởi React, bạn cần tạo ra một mối liên hệ 2 chiều giữa giá trị của các phần tử của Form và trạng thái của React.

1- Form Input

Dưới đây là ví dụ đơn giản với phần tử <input>, giá trị của phần tử này được gán từ this.state.fullName (Một trạng thái được quản lý trong Component). Khi người thay đổi giá trị của <input>, giá trị này cần phải được cập nhập vào cho this.state.fullName thông qua phương thức 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

Trong HTML, khác với phần tử <input>, phần tử <textarea> cho phép người dùng nhập vào nội dung văn bản dài và phức tạp hơn, nội dung văn bản của <textarea> chính là phần tử con của nó (Phần tử con này là một #text Node).

<textarea>
  Hello there, this is some text in a text area
</textarea>
Trong React, nội dung văn bản <textarea> sẽ được thiết lập qua thuộc tính value thay vì #text Node. Như vậy trong React cách sử dụng của <textarea> không có gì khác biệt so với <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>

Xem thêm các chuyên mục:

Có thể bạn quan tâm

Đây là các khóa học trực tuyến bên ngoài website o7planning mà chúng tôi giới thiệu, nó có thể bao gồm các khóa học miễn phí hoặc giảm giá.