Làm việc với input trong React

Làm việc với input trong React được thực hiện thông qua state. Mỗi input được gán một state riêng, chứa value của input.

Hãy xem một ví dụ. Giả sử chúng ta có một input:

function App() {
	return <div>
		<input />
	</div>;
}

Giả sử chúng ta cũng có một state:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input />
	</div>;
}

Hãy liên kết state của chúng ta với thuộc tính value của input:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} />
	</div>;
}

Trong trường hợp này, kết quả sẽ là khi state thay đổi, văn bản của input cũng sẽ thay đổi một cách reactive.

Tuy nhiên, điều này tạo ra một hiệu ứng phụ thú vị: bây giờ khi chạy mã trong trình duyệt, không thể thay đổi văn bản trong input! Tại sao: bởi vì khi nhập văn bản vào input, state value không thay đổi, do đó, văn bản trong input cũng không nên thay đổi.

Hãy tự thử. Sao chép mã của tôi và chạy trên máy của bạn. Thử thay đổi văn bản trong input - bạn sẽ không làm được gì. Mở console của trình duyệt - bạn sẽ thấy một cảnh báo của React. Cảnh báo này chỉ cho chúng ta rằng chúng ta đã liên kết state với input, nhưng bằng cách đó đã khóa input.

Hãy làm sao để chúng ta có thể nhập văn bản vào input của mình. Để làm điều này, cần phải đảm bảo rằng khi nhập, state của chúng ta sẽ thay đổi thành giá trị hiện tại của input.

Trước hết, cần gắn sự kiện onChange vào input:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Sự kiện này trong React hoạt động khác so với JS thuần. Trong React, nó kích hoạt ngay lập tức khi input thay đổi. Tức là khi nhập hoặc xóa ký tự.

Bây giờ hãy thêm trình xử lý cho sự kiện của chúng ta:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange() {
		
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Trong trình xử lý này, chúng ta phải đọc văn bản hiện tại của input và đặt nó vào state bằng cách sử dụng hàm setValue.

Vấn đề là this của hàm này sẽ không trỏ đến input của chúng ta - đó là đặc điểm của React. Để nhận được phần tử nơi sự kiện xảy ra, chúng ta cần sử dụng event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // tham chiếu đến phần tử DOM của input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Hãy xuất văn bản hiện tại của input bằng cách sử dụng event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // văn bản hiện tại của input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Và bây giờ hãy ghi văn bản của input vào state của chúng ta:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Bây giờ chúng ta có thể nhập văn bản vào input. Đồng thời state value sẽ luôn chứa văn bản hiện tại của input.

Chúng ta có thể dễ dàng xác minh điều này. Hãy xuất nội dung văn bản của chúng ta vào một đoạn văn. Trong trường hợp này, khi nhập văn bản vào input, văn bản đã nhập sẽ tự động xuất hiện trong đoạn văn:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
		<p>text: {value}</p>
	</div>;
}

Chúng ta có thể viết lại thành một phiên bản gọn hơn với hàm mũi tên ẩn danh:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<input value={value} onChange={event => setValue(event.target.value)} />
		<p>text: {value}</p>
	</div>;
}

Vì vậy, để bất kỳ input nào hoạt động, chúng ta cần làm như sau: tạo một state cho input đó, liên kết state với thuộc tính value của input, gắn sự kiện onChange vào input, trong trình xử lý sự kiện, thay đổi state của input thành văn bản của nó.

Các thao tác này sẽ cần được thực hiện với từng input. Tức là, nếu bạn có hai input, thì bạn sẽ có hai state và hai hàm xử lý sự kiện onChange.

Tạo hai input. Hãy để văn bản của input đầu tiên được xuất ra đoạn văn thứ nhất, còn văn bản của input thứ hai - ra đoạn văn thứ hai.