get the value of an input field in react
to get the value of an input field in react:
- declare a state variable that tracks the value of the input field.
-
adds
onchangea property to the input field. -
use
event.target.valueto get the value of the input field and update the state variable.
import {usestate} from 'react';
const app = () => {
const [message, setmessage] = usestate('');
const handlechange = event => {
setmessage(event.target.value);
console.log('value is:', event.target.value);
};
return (
<div><inputtype="text"id="message"name="message"onchange={handlechange}value={message}
/><h2>message: {message}h2>div>
);
};
exportdefaultapp;
we use the usestate hook to track the value of the input field.
we set
onchangethe property on the field, so every time its value changes,handlechangethe function will be called.
we can access the value of the input element handlechangein the function as .event.target.value
eventthe object'stargetproperties refer to the input elements.
handlechangewe can access the value of the input field from anywhere outside the function
using the message status variable .
alternatively, we can use an uncontrolled input field.
to get the value of an uncontrolled input field in react:
-
use
userefthe hook to initialize a ref. - set the ref attribute on the input field.
ref.current.valueaccess the value of an input field as .
import {useref} from 'react';
const app = () => {
const inputref = useref(null);
functionhandleclick() {
console.log(inputref.current.value);
}
return (
<div><inputref={inputref}type="text"id="message"name="message"
/><buttononclick={handleclick}>log messagebutton>div>
);
};
exportdefaultapp;
this example uses an uncontrolled input. note that the input field has no onchangeor valueattributes 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 using uncontrolled input fields, we access the input using a ref.
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 to access the input element on which we set the ref attribute.
when we pass a ref prop to an element, for example , react .currentsets the property of the ref object to the corresponding dom node.
userefthe hook creates a normal javascript object, but gives us the same ref object on every render. in other words, it's a .currentmemoized object value with a ref property.
it is important to note that when we change the value of the ref's current attribute, it does not cause a re-render.
each time the user clicks the button in the example, the uncontrolled input value is logged.
we should not set the value prop on uncontrolled inputs ( onchangeinput fields without a handler) because this will make the input field immutable and we won't be able to type in it.
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
rendering nested arrays in react using map()
publish date：2025/03/10 views：71 category：react
-
使用 map() 渲染嵌套数组： 使用 map() 方法迭代外部数组。 在每次迭代中，调用嵌套数组的 map()方法。 渲染嵌套数组的元素。
publish date：2025/03/10 views：118 category：react
-
在 react 中获取表单提交的输入值： 将输入字段的值存储在状态变量中。在表单元素上设置 onsubmit 属性。 在我们的 handlesubmit 函数中访问输入字段的值。
publish date：2025/03/10 views：130 category：react
-
在 react 中为 body 元素添加一个类： 在 useeffect 或事件处理程序中以 document.body 的形式访问 body 元素。 使用 classlist.add() 方法将类添加到 body 标记。 例如，document.body.classlist.add('my-class'
clearing the value of an input field in react.js
publish date：2025/03/10 views：119 category：react
-
要在 react 中清除输入字段的值：将输入的值存储在状态变量中。 当某个事件发生时，将状态变量设置为空字符串。对于不受控制的组件，将 ref 的值设置为空字符串，例如 ref.current.va
deleting keys from state object in react
publish date：2025/03/10 views：62 category：react
-
要从 react 状态对象中删除键： 使用 usestate 挂钩来存储状态对象。 解构对象的键和其余属性。 将状态设置为其余属性。
publish date：2025/03/09 views：170 category：react
-
要在 react 状态下替换数组中的对象：使用 map() 方法遍历数组。 在每次迭代中，检查是否满足某个条件。 替换满足条件的对象并按原样返回所有其他对象。
how to call a function only once in react
publish date：2025/03/09 views：127 category：react
-
使用 useeffect 钩子在 react 中只调用一次函数。 当 useeffect 钩子传递一个空的依赖数组时，它仅在组件挂载时运行。 当我们必须在组件安装时获取数据时，这是首选方法。
run react hooks when a component unmounts
publish date：2025/03/09 views：81 category：react
-
卸载组件时，使用 useeffect 钩子运行react钩子。 我们从 useeffect 钩子返回的函数在组件卸载时被调用，可用于清理目的。
publish date：2025/03/09 views：181 category：react
-
在 react 中使用带有索引的 map() 方法：在数组上调用 map() 方法。传递给 map() 方法的函数会被元素和索引调用。
