Hiểu về Form và Sự kiện trong React

() translation by (you can also view the original English article)

Trong hướng dẫn này, bạn sẽ tìm hiểu về form và các sự kiện trong React. Chúng ta sẽ bắt đầu bằng cách tạo ra một ứng dụng đơn giản dựa trên React và sau đó thêm một form và một số phần tử. Sau đó, chúng ta sẽ xem cách thêm sự kiện vào các phần tử của form.

Nếu bạn là người mới bắt đầu với React, tôi khuyên bạn nên đọc hướng dẫn giới thiệu về React để làm quen.

Bắt đầu

Hãy bắt đầu bằng cách thiết lập ứng dụng web React của chúng ta. Tạo một thư mục dự án gọi là ReactFormApp. Bên trong ReactFormApp, hãy tạo một tập tin gọi là index.html và thêm mã HTML sau đây:

<html>

<head>
    <title>TutsPlus - React Forms & Events</title>
</head>

<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>

</html>

Khởi tạo dự án sử dụng Node Package Manager (npm).

npm init

Điền vào các chi tiết theo yêu cầu và bạn sẽ có tập tin package.json trong thư mục ReactFormApp.

{
  "name": "reactformapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Cài đặt các phụ thuộc react và react-dom sử dụng npm.

1	npm install react react-dom --save

Cài đặt gói babel theo yêu cầu bằng cách sử dụng npm và lưu nó vào tập tin package.json.

1	npm install --save-dev webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015

Các gói babel được yêu cầu để chuyển đổi mã JSX sang JavaScript.

Tạo một tập tin cấu hình webpack để xử lý các cấu hình webpack. Tạo một tập tin gọi là webpack.config.js, và thêm các cấu hình sau:

module.exports = {
  entry: './app.js',

  output: {
    filename: 'bundle.js',
  },

  module: {
    loaders: [
      { exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
    ]
  }
}

app.js là tập tin nơi chứa code React của chúng ta. Tạo một tập tin gọi là app.js bên trong thư mục ReactFormApp. Nhập các thư viện react cần thiết trong app.js. Tạo một thành phần gọi là App có một div cùng với một số văn bản. Kết xuất thành phần bằng cách sử dụng phương thức render. Tập tin app.js cơ bản sẽ trông như sau:

import React from 'react'
import { render } from 'react-dom'

var App = React.createClass({
  render:function(){
    return(
      <div>
        TutsPlus - Welcome to React Form App
      </div>
    );
  }
});

render((
    <App />
  ),document.getElementById('app'))

Lưu các thay đổi và thử tải lại máy chủ phát triển webpack.

1	webpack-dev-server

Một khi máy chủ đã được khởi động lại, bạn sẽ có thể xem ứng dụng React chạy trên http://localhost:8080/.

Tạo một Form React

Chúng ta có ứng dụng React cơ bản có thể chạy được, hãy chuyển sang bước tiếp theo và thử tạo ra một thành phần form sử dụng code JSX trong app.js.

Tạo một thành phần gọi là FormComp trong app.js.

var FormComp = React.createClass({
    render:function(){
		return(
		);
	}
})

Bên trong hàm render cho FormComp, chúng ta sẽ xác định các code HTML cho việc tạo ra một form. Chúng ta sẽ đặt vào đó một vài label, input và một button. Nó sẽ trông như thế này:

var FormComp = React.createClass({
    render:function(){
		return(
			<div>

				<h2>TutsPlus - React Form Tutorial</h2>
				<hr />
				
				<label>First Name: </label>
				<input type="text"  />
				<br />

				<label>Last Name: </label>
				<input type="text"  />
				<br />

				<input type="button" value="Submit" />

				<hr />
			</div>
		);
	}
})

Kết xuất thành phần form FormComp để hiển thị form bên trong index.html.

1	render((
2	<FormComp />
3	),document.getElementById('app'))

Lưu các thay đổi và khởi động lại máy chủ webpack và bạn sẽ có thể thấy form.

Thêm các sự kiện vào Form

Form React của chúng ta trông khá tốt. Để làm cho nó có thể tương tác, chúng ta cần thêm sự kiện vào form.

Chúng ta sẽ bắt đầu bằng cách thêm các biến trạng thái vào mỗi input, từ đó chúng ta có thể đọc các giá trị của input. Hãy thiết lập các biến trạng thái cho input first name và last name.

1	<input type="text" value = {this.state.fName} />
2	<input type="text" value = {this.state.lName} />

Hãy chắc chắn đặt trạng thái ban đầu cho các biến nêu trên. Xác định hàm getInitialState bên trong form FormComp và khởi tạo cả hai biến.

1	getInitialState: function () {
2	return {lName: '',fName:''};
3	},

Chúng ta cần xử lý sự kiện on-change của các input và gán cho các biến trạng thái khi giá trị trong input thay đổi. Vậy hãy định nghĩa một sự kiện onChange trên các input.

1	<input type="text" value = {this.state.fName} onChange={this.handleFNameChange} />
2	<input type="text" value = {this.state.lName} onChange={this.handleLNameChange} />

Xác định các hàm onChange bên trong FormComp và thiết lập các biến trạng thái.

handleFNameChange:function(event){
        this.setState({fName: event.target.value});
},

handleLNameChange:function(event){
   	 this.setState({lName: event.target.value});
}

Hãy thử kết xuất các biến trạng thái bằng cách sử dụng chúng. Bên trong mã HTML của FormComp, thêm phần tử sau.

1	<h3>Your full name is </h3> {this.state.fName} {this.state.lName}

Lưu các thay đổi và khởi động lại máy chủ webpack. Thử nhập một số văn bản bên trong hộp văn bản First name và Last name, và bạn sẽ có thể xem kết quả ngay khi bạn gõ.

Tiếp theo, thêm một sự kiện on-click vào nút submit mà chúng ta có trong form của chúng ta.

1	<input type="button" onClick={this.handleClick} value="Submit" />

Định nghĩa hàm handleClick bên trong thành phần FormComp. Khi nhấp vào nút submit, chúng ta sẽ nối first name và last name và hiển thị full name bên trong form. Dưới đây là hàm handleClick:

1	handleClick:function(){
2	var fullName = this.state.fName + ' ' + this.state.lName;
3	this.setState({Name:fullName});
4	},

Đồng thời, khởi tạo biến Name trong hàm getInitialState.

1	getInitialState: function () {
2	return {lName: '',fName:'',Name:''};
3	}

Hiện thị full name đã được nối trong form HTML.

1	<h3>Your full name is </h3> {this.state.Name}

Thành phần FormComp hoàn chỉnh sẽ trông như thế này:

var FormComp = React.createClass({


    getInitialState: function () {
      return {lName: '',fName:'',Name:''};
   	},

   	handleFNameChange:function(event){
   	  this.setState({fName: event.target.value});
   	},

   	handleLNameChange:function(event){
   	  this.setState({lName: event.target.value});
   	},

   	handleClick:function(){
   		var fullName = this.state.fName + ' ' + this.state.lName;
   		this.setState({Name:fullName});
   	},

	render:function(){
		return(
			<div>
				<h2>TutsPlus - React Form Tutorial</h2>
				<hr />

				<label>First Name: </label>
				<input type="text" value = {this.state.fName} onChange={this.handleFNameChange}  />
				<br />

				<label>Last Name: </label>
				<input type="text" value = {this.state.lName} onChange={this.handleLNameChange}  />
				<br />

				<input type="button" onClick={this.handleClick} value="Submit" />

				<hr />

				<h3>Your full name is </h3> {this.state.Name}
			</div>
		);
	}
})

Lưu lại các thay đổi ở trên và khởi động lại máy chủ. Nhập cả hai trường name và nhấn nút submit, và full name sẽ được hiển thị.

Tổng kết

Trong hướng dẫn React này, bạn đã học cách làm quen với việc tạo các ứng dụng React và hiểu những khái niệm cơ bản về cách làm việc với form và sự kiện trong một ứng dụng web dựa trên React. Tôi hy vọng hướng dẫn này sẽ thật sự hữu ích cho bạn trong việc làm quen với việc tạo các ứng dụng dựa trên React.

Mã nguồn cho bài viết này sẵn có trên GitHub.

Hãy cho chúng tôi biết những suy nghĩ, đề xuất hoặc bất kỳ điều chỉnh nào trong phần bình luận bên dưới nhé. Hãy tiếp tục đọc thêm các hướng dẫn về React.