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

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={}变动时发生的事件
<input type="text" placeholder='请输入关键字' value={GetSearchVal} ref={inputRef} onChange={getIptValue}/>

然后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 (<>
   <input type="text" placeholder='请输入关键字' value={GetSearchVal} ref={inputRef} onChange={getIptValue}/>
   </>)
}

export default HomePageHeader;

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