2021/03/24 如何单独取得antd组件中Input组件的value值

2021/03/24
input值可以通过被它包裹的form表单取得，有时候会出现没有form表单包裹的情况，就得要去单独获取，请看代码👇
1、先初始化一些变量：
const [inpValue, setInpValue] = useState(''); // 输入框值
2、定义一些方法：
// 设置输入框的值
const showInpValue = e => {
// message.info(JSON.stringify(e));
setInpValue(e.target.value); // 这里要注意的是，这里的e是一个对象，并非我们所需要的直接获取的value值，value它在e.target.value里面
}

// 展示输入框值
const showInpValue2 = () => {
message.info(inpValue);
}
3、给Input组件赋值：
<Input
value={inpValue} // 必写，原理：将输入框的值绑定到变量以实现动态获取与写入
onChange={showInpValue} // 这里的onChange方法必须要写，否则无法输入值，原理是将输入的值通过变量间接赋值给输入框的value
onPressEnter={showInpValue2} // 这里是按下回车打印输入框的值，可忽略
/>