我有一個具有不同文本欄位的組件，并且想要訪問特定的 ID，例如具有標簽 =“電梯數量”的文本欄位。我正在嘗試這樣的事情，但我不確定如何正確選擇 id。
let elevatorAmt = (document.getElementById('ID I want to select') as HTMLInputElement);
這些是我組件中的文本欄位
interface Props{
num: number | undefined;
setNum: React.Dispatch<React.SetStateAction<number | undefined>>;
handleAdd: (e: React.FormEvent) => void;
}
const Results = ({ num, setNum, handleAdd }: Props) => {
const inputRef = useRef<HTMLInputElement>(null);
return (
<Grid>
<form className='input' onSubmit={(e) => {
handleAdd(e)
inputRef.current?.blur();
}}>
<TextField
id="outlined-read-only-input"
label="Elevator amount"
color='primary'
variant="outlined"
type="number"
InputLabelProps={{
shrink: true,
}}
InputProps={{
readOnly: true,
}} />
<TextField
id="outlined-read-only-input"
label="Unit Price of Elevators"
color='primary'
variant="outlined"
type="number"
InputLabelProps={{
shrink: true,
}}
InputProps={{
readOnly: true,
}} />
我像這樣傳遞我的組件：
<Results num={num} setNum={setNum} handleAdd={handleAdd} />
感謝您的幫助
編輯：我提到了 Id 但我想訪問該值，這并不重要
uj5u.com熱心網友回復：
正如您在評論中所說，您實際上想要文本欄位的值。在這種情況下，您需要為您的文本欄位組件設定一個狀態，并在文本欄位的值發生更改時更新該狀態。它會是這樣的：
const MyComponent = () => {
const [text, setText] = useState();
return
<div>
<TextField
id="outlined-read-only-input"
label="Elevator amount"
color='primary'
variant="outlined"
type="number"
InputLabelProps={{
shrink: true,
}}
InputProps={{
readOnly: true,
}}
//This will update the state whenever it's value changes.
onChange={(event) => {setText(event.target.value)}}
/>
</div>
}
通過這樣做，text將始終包含文本欄位中內容的當前值。
順便說一句，我假設您使用的是 material-ui。組件和它的道具看起來像它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/449035.html