Nhận giá trị của nút onclick javascript

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út

Chú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 trang

Sau 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ào

Vì 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

1. Tạo một ref cho trường đầu vào
2. Đặ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
       
     );
   }
   

   9 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
3. 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
    
  );
}

2

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
    
  );
}

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 đổi

Chú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
    
  );
}

0

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 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
    
  );
}

2

Mặ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ở

Làm cách nào để nhận được giá trị từ Nút phản ứng?

Chúng ta có thể truyền tham số trong hàm onClick không?

Nó được gọi là gì khi một người nhấp vào nút trên biểu mẫu được hiển thị bởi Javascript của bạn?

Chúng tôi có thể sử dụng onClick trong thẻ neo không?