tsx 获取input值
时间: 2023-09-19 11:11:55 浏览: 58
在 TypeScript 中使用 React 开发时,可以通过使用 `useState` 钩子来获取输入框的值。下面是一个示例代码:
```tsx
import React, { useState } from 'react';
function MyComponent() {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(event.target.value);
};
return (
<div>
<input type="text" value={inputValue} onChange={handleInputChange} />
<p>输入框的值为:{inputValue}</p>
</div>
);
}
```
在上面的代码中,我们首先使用 `useState` 钩子创建了一个名为 `inputValue` 的状态变量,并初始化为一个空字符串。然后,我们定义了一个名为 `handleInputChange` 的函数,用于处理输入框的变化事件,在事件处理函数中更新 `inputValue` 的值。最后,我们将 `inputValue` 的值绑定到输入框的 `value` 属性,并在页面中展示它的值。
这样,当用户在输入框中输入内容时,`inputValue` 的值会随之更新。你可以在其他地方使用这个状态变量来获取输入框的值。