我正在做一個嘗試實作搜索功能的專案。我的第一步是確保所有輸入都設定為小寫以使 SQL 呼叫更容易。但是，我偶然發現了一個我正在努力解決的問題。我不知道如何在反應打字稿中做一個 document.getElementById('') 。我對這些語言很陌生，并嘗試了此處找到的解決方案（如何在 typescript 中執行類似 document.getElementById().value 的操作？），但這似乎無法獲取存盤在我的元素中的資料。
所以我想知道如何將搜索欄中的輸入輸入到變數 defaultText 中。
這是我要抓取的元素
<Row><input type="search" id="form1" onChange={this.input} placeholder="S?k etter oppskrift.."/></Row>
這是我嘗試將輸入設定為小寫的函式
input(){
const defaultText:string = (document.getElementById('form1') as HTMLInputElement).value;
console.log (defaultText);
// To convert Lower Case
let lowerCaseText = defaultText.toLowerCase();
console.log(lowerCaseText);
}
'console.log' 的結果只是一個空行
uj5u.com熱心網友回復：
您不需要為此使用本機 javascript 選擇器。您可以只使用該onChange方法，第一個引數將為您提供輸入更改的 ChangeEvent。您可以簡單地通過event.target.value（假設引數被視為event）來獲取該值。
此外，您可以使用 將此值保存到狀態useState。
查看更改后的代碼。
const [inputValue, setInputValue] = useState("");
function onChange(event: React.ChangeEvent<HTMLInputElement>){
const defaultText:string = event.target.value;
// To convert Lower Case
let lowerCaseText = defaultText.toLowerCase();
// You can either save lowerCaseText or defaultText here
setInputValue(defaultText):
}
<Row><input type="search" id="form1" onChange={onChange} placeholder="S?k etter oppskrift.." value={inputValue}/></Row>
uj5u.com熱心網友回復：
您應該使用狀態，這將是處理它的最佳方式，它是“React 方式”
參見React Docs
在組件的較高位置，您需要宣告輸入的初始值：
const [inputValue, setInputValue] = React.useState("");
// In typescript you can also do the following:
// const [inputValue, setInputValue] = React.useState<string>("");
稍后您將需要使用狀態，并在更新時進行管理：
<Row>
<input
type="search"
id="form1"
value={inputValue}
onChange={(event) => {
setInputValue(event.target.value)
}}
placeholder="S?k etter oppskrift.."
/>
</Row>
uj5u.com熱心網友回復：
將我的評論轉換為答案以舉個例子。
您應該使用 anuseState來記住輸入的值。使用值設定它。然后在您的onChange函式中，在呼叫 set 函式之前將其設定為較低。
沒有打字稿的演示：
const { useState, useEffect } = React;
function App() {
const [value, setValue] = useState('');
const onInputValue = (e) => {
setValue(e.target.value.toLowerCase())
};
return (
<input type="search" value={value} id="form1" onChange={onInputValue} placeholder="S?k etter oppskrift.."/>
);
}
ReactDOM.render(<App />, document.getElementById("react"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/523606.html
標籤：反应打字稿