在 React 版本 16.13.1 中,获取输入文本的值可以通过使用受控组件的方式来实现。受控组件是指表单元素的值受 React 组件的状态控制,而不是由 DOM 自身管理。
要获取输入文本的值,你需要遵循以下步骤:
inputValue
。inputValue
,并绑定 onChange
事件处理程序来更新 inputValue
。onChange
事件处理程序中,使用 event.target.value
获取输入文本的值,并更新组件的状态。下面是一个示例:
import React, { useState } from 'react';
function MyComponent() {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
}
return (
<div>
<input type="text" value={inputValue} onChange={handleChange} />
<p>输入文本的值为: {inputValue}</p>
</div>
);
}
export default MyComponent;
在这个示例中,我们使用 useState
钩子函数来创建了一个名为 inputValue
的状态属性,并将其初始值设为一个空字符串。handleChange
函数用于更新 inputValue
的值。在 JSX 中,我们将输入框的值设为 inputValue
,并将 handleChange
函数绑定到 onChange
事件上。每次用户在输入框中输入时,handleChange
会被触发,更新 inputValue
的值,并在页面上显示出来。
这种方式可以适用于 React 版本 16.13.1,并且是一种通用的处理输入文本的方式。更多关于 React 的相关信息,你可以参考React 官方文档。
领取专属 10元无门槛券
手把手带您无忧上云