迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > React >

在 React 中使用 Ref 设置输入值

作者:迹忆客 最近更新:2022/10/01 浏览次数:

在 React 中使用 ref 设置输入字段的值:

  1. 在输入元素上设置 ref 属性。
  2. 当某个事件被触发时,更新 ref 的值。
  3. 例如,ref.current.value = 'New value'
import {useRef} from 'react';

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

  function handleClick() {
    // 👇️ 更新 input 值
    inputRef.current.value = 'New value';

    // 👇️ 访问 input 值
    console.log(inputRef.current.value);
  }

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

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

export default App;

在 React 中使用 Ref 设置输入值

该示例使用不受控制的输入。请注意,输入字段没有设置 onChange 属性或值。

当使用不受控制的输入字段时,我们使用 ref 访问输入。

useRef() 钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象,其 .current 属性被初始化为传递的参数。

注意 ,我们必须访问 ref 对象的 current 属性才能访问我们设置 ref 属性的输入元素。

当我们将 ref prop 传递给元素时,例如<input ref={myRef} /> ,React 将 ref 对象的 .current 属性设置为对应的 DOM 节点。

useRef 钩子创建一个普通的 JavaScript 对象,但在每次渲染时为您提供相同的 ref 对象。换句话说,它几乎是一个带有 .current 属性的记忆对象值。

需要注意的是,当我们更改 ref 的当前属性的值时,不会导致重新渲染。

每次用户单击示例中的按钮时,不受控制的输入的值都会更新。

如果我们需要清除输入字段的值,请将其值设置为空字符串,例如 inputRef.current.value = ''

我们不应该在不受控制的输入(没有 onChange 处理程序的输入字段)上设置 value prop,因为这会使输入字段不可变并且我们将无法输入它。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 PHP 中确定 referer

发布时间:2023/03/29 浏览次数:75 分类:PHP

本教程演示了一种在 PHP 中确定引用者的简单而安全的方法。我们将用户会话存储在 first 和 other 以确定 referer,同时我们还使用 HTTP referer 来显示上次访问的服务器位置。

Node.js 与 React JS 的比较

发布时间:2023/03/27 浏览次数:137 分类:Node.js

本文比较和对比了两种编程语言,Node.js 和 React。React 和 Node.js 都是开源 JavaScript 库的示例。 这些库用于构建用户界面和服务器端应用程序。

在 React 中循环遍历对象数组

发布时间:2023/03/18 浏览次数:124 分类:React

在 React 中循环对象数组: 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组,其中包含传入函数的结果。 export default function App (

获取 React 中元素的类名

发布时间:2023/03/18 浏览次数:162 分类:React

在 React 中使用 event.target 获取元素的类名 获取元素的类名: 将元素上的 onClick 属性设置为事件处理函数。 访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons

如何将 key 属性添加到 React 片段

发布时间:2023/03/18 浏览次数:152 分类:React

使用更详细的片段语法将 key 属性添加到 React 片段,例如 React.Fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组,而不向 DOM 添加额外的节点。 import React from react

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便