我正在嘗試將 Square 元素的 innerHTML 傳遞給 onClick 函式。我也試過傳入，i但它總是等于 100。有沒有辦法i在它等于進入 Square 的相同值時通過，或者有沒有辦法將 innerHTML 傳遞給函式。目前，這段代碼會產生錯誤：
[TS: 2532]this is possibly undefined
我正在制作一個 100 個正方形的網格，每個正方形都是一個按鈕，每個正方形都應該有自己的 ID/編號，從 1-100 來識別它們。這就是我目前所擁有的： 100 個正方形的網格，以 10x10 的形式排列
export const Square = (props:any) =>{
i = 1;
if(i > 100)
{
i = 1;
}
return(
<DefaultButton styles={factionMapButton} onClick={()=>onSquareClick(this.innerHTML,props.onClick)}>{i}</DefaultButton>
);
}
const onSquareClick = (number:any,isOpen:any) => {
console.log(number);
const panelContent = document.getElementById("panelContent");
if(panelContent !== null)
{
panelContent.innerHTML = number;
}
isOpen();
}
uj5u.com熱心網友回復：
你有很多問題。
- 您應該盡最大努力避免
any使用 TypeScript，尤其是不要隨意使用 - 這違背了型別檢查的全部目的。如果您要嘗試修復型別問題，則應首先正確鍵入所有內容。 - 箭頭函式不會
this被呼叫背景關系改變。如果沒有封閉的 full-fledgedfunction，this箭頭函式中的 將是全域物件 orundefined，這兩者對你都沒用。要么使用 afunction來捕獲this，或者更好的是，使用單擊事件的 currentTarget 來獲取對單擊按鈕的參考。 - 元素的
.innerHTML回傳一個字串，而不是一個元素。如果它包含可以強制轉換為數字的字串，請顯式將其強制轉換為數字。（如果 HTML 內容只是可以強制轉換為數字的字串，則應.textContent改為使用 - 僅.innerHTML在故意設定或檢索 HTML 標記時使用，而不是純文本） - 更好的方法是傳遞
itoonSquareClick而不是使用 DOM 操作 - 使用閉包更容易
let i = 1;
export const Square = ({ onClick }: { onClick: () => void }) => {
i = 1;
if (i > 100) {
i = 1;
}
return (
<DefaultButton styles={factionMapButton} onClick={(e) => { onSquareClick(i, onClick); }}>{i}</DefaultButton>
);
};
const onSquareClick = (number: number, isOpen: () => void) => {
const panelContent = document.getElementById('panelContent');
if (panelContent !== null) {
panelContent.innerHTML = String(number);
}
isOpen();
};
- 如果你使用 React，你不應該使用 vanilla DOM 操作
panelContent.innerHTML = number;，相反，設定視圖用來確定該元素中應該存在什么的 React 狀態。就像是
// Parent component:
const [panelContentText, setPanelContentText] = useState('');
// expand as needed for the other components in your app...
return <div id="panelContent">{panelContentText}</div>
<Square setPanelContentText={setPanelContentText} /* and other props */ />
// ...
// Then call the setPanelContentText prop in onSquareClick
const onSquareClick = (number: number, isOpen: () => void, setPanelContentText: React.Dispatch<React.SetStateAction<string>>) => {
setPanelContentText(String(number));
isOpen();
};
I'd recommend looking into an introductory React tutorial, it looks like you might benefit from learning the process within React's ecosystem, rather than trying to mishmash your understanding of vanilla JS's DOM with React.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/442527.html
標籤：javascript 反应 打字稿 流利的反应