React+TSX怎么获得input输入框里的值

2023-03-23 16:15| 来源: 网络整理| 查看: 265

React+TSX(React+TS)获取input框里的值,需要使用useState、useRef。 useState类似Vue里的双向绑定,但不是实时更新的,需要一个事件来更新值,具体代码如下:

//定义一个搜索框的值和修改值的方法名(就是[]里的两个名) const [GetSearchVal, SetGetSearchVal] = useState(''); 复制代码

我们再定义一个Ref

const inputRef = React.useRef(null); 复制代码

然后我们需要一个获取value值的事件方法

const getIptValue = (event: { target: { value: any } }) => { SetGetSearchVal(event.target.value); }; 复制代码

然后我们需要配置input

//需要配置 value={}默认值 | ref={}Ref | onChange={}变动时发生的事件复制代码

然后GetSearchVal就可以获得input框输入后的值了,可以console.log(GetSearchVal)看一看效果全部代码如下

import React, { useEffect, useState } from 'react'; const HomePageHeader: React.FC = () => { const [GetSearchVal, SetGetSearchVal] = useState(''); const inputRef = React.useRef(null); const handleOnChange = (event: { target: { value: any } }) => { SetGetSearchVal(event.target.value); console.log(GetSearchVal) }; return ( ) } export default HomePageHeader; 复制代码

如果有什么不足和错误之处,欢迎大家指出!

【本文地址】

公司简介

联系我们