JIYIK CN >

Current Location:Home > Learning > WEB FRONT-END > React >

Using Ref to get the value of input field in React

Author:JIYIK Last Updated:2025/03/17 Views:

Use ref in React to get the value of an input field:

  1. Set the ref attribute on the input element.
  2. Access the value of an input field on a ref object, for example ref.current.value.
import {useRef} from 'react';

const App = () => {
  const inputRef = useRef(null);

  function handleClick() {
    console.log('value 👉️', inputRef.current.value);
  }

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        id="message"
        name="message"
      />

      <button onClick={handleClick}>Log message</button>
    </div>
  );
};

export default App;

Using Ref in React to get the value of the input field

This example shows how to get the value of an uncontrolled input field.

Note that inputs have no onChangeattributes or values ​​set.

We can use defaultValuethe attribute to pass an initial value to an uncontrolled input. However, this is not required and we can omit the attribute if we do not want to set an initial value.

When working with uncontrolled input fields, we use refto access the input.

useRef()The hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

请注意, we have to access the current property of the ref object in order to access the input element on which we set the ref attribute.

When we pass a ref prop to an element, for example <input ref={myRef} />, React sets the properties of the ref object .currentto the corresponding DOM node.

The useRef hook creates a normal JavaScript object but gives us the same ref object on every render. In other words, it’s almost a memoized object value with a .current property.

It is important to note that when you change the value of the ref's current attribute, it will not cause a re-render.

Each time the user clicks the button in the example, the uncontrolled input value is recorded.

We should not set the value prop on uncontrolled inputs ( onChangeinput fields that don't have a handler) because this will make the input field immutable and you won't be able to input.

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL:

Related Articles

Determining the referer in PHP

Publish Date:2025/04/13 Views:133 Category:PHP

$_SERVER['HTTP_REFERER'] Provides us with a referrer URL to determine the user request on the server. However, this is not a best practice because the referrer can be HTTP compromised through . $_SESSION[] Determine the referrer in PHP usin

Implementing refresh permissions in MySQL

Publish Date:2025/04/10 Views:118 Category:MySQL

This tutorial explains the refresh permissions operation and its implementation with examples. Implementing refresh permissions in MySQL MySQL implements user management through grant tables to ensure security and access control in the serv

How to fix Git error Error: src refspec master does not match any

Publish Date:2025/04/05 Views:124 Category:Git

When using Git, we may encounter the error "src refspace master does not match any". Here's what the error means and how to fix it. What does src refspec master does not match any Mean in Git mean? We may encounter this error when we try to

Fatal: Refusing to Merge Unrelated Histories error in Git

Publish Date:2025/03/29 Views:124 Category:Git

This article outlines the steps required to resolve the fatal: refusing to merge unrelated histories error in Git. We usually encounter such errors when trying to merge two unrelated Git projects into one branch. It pops up when the receivi

Git refresh remote branch

Publish Date:2025/03/28 Views:94 Category:Git

Git is considered to be the most accurate and the most used software by developers in their projects and can be operated by multiple developers simultaneously. It provides many unique and quirky features to the developers which are very dif

How to avoid cross-origin (CORS) issues in React/Next.js

Publish Date:2025/03/17 Views:170 Category:NETWORK

In this article, we will introduce how to avoid cross-origin (CORS) issues in React/Next.js. Cross-origin resource sharing (CORS) is a protocol that defines how web requests should be handled when crossing different URLs.

React Tutorial - Transferring Props

Publish Date:2025/03/16 Views:188 Category:React

React transfers Props. Props are generated when components are encapsulated. Components expose some properties (Props) to the outside world to complete some functions.

React Tutorial: Props Anti-Pattern

Publish Date:2025/03/16 Views:187 Category:React

React's Props anti-pattern, using Props to generate state in getInitialState is an anti-pattern - Anti-Pattern.

React Tutorial - Props Validation

Publish Date:2025/03/16 Views:102 Category:React

Props validation is a very useful way to use components correctly. It can avoid many bugs and problems as your application becomes more and more complex. In addition, it can make your program more readable.

Scan to Read All Tech Tutorials

Social Media
  • https://www.github.com/onmpw
  • qq:1244347461

Recommended

Tags

Scan the Code
Easier Access Tutorial