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} // 這里是按下回車打印輸入框的值，可忽略
/>