Với hook
import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
2 chúng ta tạo một biến trạng thái [import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
3] để lưu giá trị hiện tại của input field. Chúng tôi cũng tạo một biến trạng thái khác [_______14] sẽ được cập nhật với giá trị trường đầu vào khi nhấp vào nútChúng tôi đặt trình xử lý sự kiện
import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
5 trên trường đầu vào để làm cho trình xử lý này được gọi bất cứ khi nào giá trị đầu vào thay đổi. Trong trình xử lý, chúng tôi sử dụng thuộc tính import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
6 để truy cập đối tượng đại diện cho phần tử import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
0. Thuộc tính import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
1 của đối tượng này chứa giá trị đầu vào, vì vậy chúng tôi chuyển nó cho import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
2 để cập nhật import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
3 và điều này phản ánh trên trangSau khi thiết lập đầu vào được kiểm soát, giờ đây chúng ta có thể sử dụng
import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
3 bên ngoài trình xử lý import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
5 để truy cập giá trị hiện tại của trường đầu vàoVì vậy, trong trình xử lý sự kiện
import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
9 mà chúng tôi đặt trên import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
7, chúng tôi sử dụng import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
8 để cập nhật biến import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
4 với giá trị trường đầu vào hiện tạiĐăng ký bản tin Coding Beauty
Có được những hiểu biết hữu ích và nâng cao kiến thức phát triển web của bạn với các mẹo và hướng dẫn hàng tuần từ Coding Beauty. Hơn 1.400 nhà phát triển đăng ký
Nhận giá trị của đầu vào không được kiểm soát khi nhấp vào nút
Để nhận giá trị của đầu vào không được kiểm soát trên nút, hãy nhấp vào React
- Tạo một ref cho trường đầu vào
- Đặt trình xử lý sự kiện
9 trênimport { useRef, useState } from 'react'; export default function App[] { const inputRef = useRef[null]; const [updated, setUpdated] = useState['']; const handleClick = [] => { // 👇 "inputRef.current.value" is input value setUpdated[inputRef.current.value]; }; return [
Updated: {updated}
Update
7import { useRef, useState } from 'react'; export default function App[] { const inputRef = useRef[null]; const [updated, setUpdated] = useState['']; const handleClick = [] => { // 👇 "inputRef.current.value" is input value setUpdated[inputRef.current.value]; }; return [
Updated: {updated}
Update - Sử dụng đối tượng ref để truy cập giá trị đầu vào hiện tại trong trình xử lý sự kiện
Ví dụ
import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
2import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
Mặc dù dữ liệu trong đầu vào được kiểm soát được xử lý bởi trạng thái React, dữ liệu trong đầu vào không được kiểm soát được xử lý bởi chính DOM. Đây là lý do tại sao
import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
0 trong ví dụ trên không có bộ xử lý sự kiện import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
1 prop hoặc import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
5. Thay vào đó, chúng tôi truy cập giá trị trường đầu vào bằng React ref. DOM cập nhật giá trị này khi văn bản trong đầu vào bị thay đổiChúng tôi tạo một đối tượng ref với móc
import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
56 và đặt nó vào chỗ dựa import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
57 của import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
0. Làm điều này đặt thuộc tính import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
59 của đối tượng ref thành đối tượng DOM đại diện cho phần tử import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
0import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
56 trả về một đối tượng ref có thể thay đổi không thay đổi giá trị khi một thành phần được cập nhật. Ngoài ra, việc sửa đổi giá trị của thuộc tính import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
59 của đối tượng này không gây ra kết xuất lại. Điều này trái ngược với hàm cập nhật import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
93 được trả về từ import { useRef, useState } from 'react';
export default function App[] {
const inputRef = useRef[null];
const [updated, setUpdated] = useState[''];
const handleClick = [] => {
// 👇 "inputRef.current.value" is input value
setUpdated[inputRef.current.value];
};
return [
Updated: {updated}
Update
];
}
2Mặc dù tài liệu React khuyến nghị sử dụng các thành phần được kiểm soát, các thành phần không được kiểm soát mang lại một số lợi thế. Bạn có thể thích chúng hơn nếu biểu mẫu rất đơn giản và không cần xác thực ngay lập tức và các giá trị chỉ cần được truy cập khi biểu mẫu được gửi
Ayibatari Ibaba
Ayibatari Ibaba là nhà phát triển phần mềm có nhiều năm kinh nghiệm xây dựng trang web và ứng dụng. Anh ấy đã viết rất nhiều về nhiều chủ đề lập trình và đã tạo ra hàng chục ứng dụng và thư viện mã nguồn mở