在React中,可以通過useState
來實現input動態取值和賦值。
首先,需要導入useState
:
import React, { useState } from 'react';
然后,在組件中定義一個狀態變量和相應的更新函數:
const [inputValue, setInputValue] = useState('');
接下來,將輸入框的值綁定到狀態變量上,并通過更新函數來更新狀態變量的值:
<input
type="text"
value={inputValue}
onChange={e => setInputValue(e.target.value)}
/>
通過設置value={inputValue}
,可以將狀態變量的值綁定到輸入框上。當輸入框的值發生變化時,onChange
事件會觸發,并通過更新函數setInputValue
來更新狀態變量的值。
最后,可以通過inputValue
來獲取輸入框的值,并進行相應的處理。
完整示例代碼如下:
import React, { useState } from 'react';
const App = () => {
const [inputValue, setInputValue] = useState('');
return (
<div>
<input
type="text"
value={inputValue}
onChange={e => setInputValue(e.target.value)}
/>
<p>輸入的值是:{inputValue}</p>
</div>
);
}
export default App;
在上述示例中,輸入框的值會實時顯示在下方的<p>
標簽中。