如何将 innerHTML 传递给 onClick 函数(Typescript)
How can I pass innerHTML to an onClick function (Typescript)
我正在尝试将 Square 元素的 innerHTML 传递给 onClick 函数。我也试过只传递 i
但它总是等于 100。当它等于进入 Square 的相同值时有没有办法传递 i
或者有没有办法将 innerHTML 传递给函数。目前,此代码生成错误:
[TS: 2532]this is possibly undefined
我正在制作一个由 100 个方块组成的网格,每个方块都是一个按钮,每个方块都应该有自己的 ID/number 从 1-100 来识别它们。
这是我目前拥有的:Grid of 100 squares arranged in 10x10 formation
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();
}
你的问题还真不少。
- 你应该尽最大努力避免在 TypeScript 中使用
any
,尤其是不要随意使用 - 这违背了 type-checking 的全部目的。如果您正在尝试解决类型问题,您应该首先正确输入所有内容。
- 箭头函数的
this
不会被调用上下文改变。如果没有封闭 full-fledged function
,箭头函数中的 this
将是全局对象或 undefined
,这两者对您来说都是无用的。使用 function
来捕获 this
,或者更好的是,使用单击事件的 currentTarget 来获取对单击按钮的引用。
- 元素的
.innerHTML
returns 字符串,不是元素。如果它包含可以强制转换为数字的字符串,则显式地将其强制转换为数字。 (如果HTML内容是只有可以强制转换成数字的字符串,应该用.textContent
代替——只有在有意的时候才用.innerHTML
设置或检索 HTML 标记,而不是纯文本)
- 更好的方法是将
i
传递给 onSquareClick
而不是使用 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,则不应使用像
panelContent.innerHTML = number;
这样的原始 DOM 操作 - 相反,设置视图使用的 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();
};
我建议您查看介绍性的 React 教程,看起来您可能会从学习 React 生态系统中的过程中受益,而不是试图将您对 vanilla JS DOM 的理解与 React 混为一谈。
我正在尝试将 Square 元素的 innerHTML 传递给 onClick 函数。我也试过只传递 i
但它总是等于 100。当它等于进入 Square 的相同值时有没有办法传递 i
或者有没有办法将 innerHTML 传递给函数。目前,此代码生成错误:
[TS: 2532]this is possibly undefined
我正在制作一个由 100 个方块组成的网格,每个方块都是一个按钮,每个方块都应该有自己的 ID/number 从 1-100 来识别它们。
这是我目前拥有的:Grid of 100 squares arranged in 10x10 formation
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();
}
你的问题还真不少。
- 你应该尽最大努力避免在 TypeScript 中使用
any
,尤其是不要随意使用 - 这违背了 type-checking 的全部目的。如果您正在尝试解决类型问题,您应该首先正确输入所有内容。 - 箭头函数的
this
不会被调用上下文改变。如果没有封闭 full-fledgedfunction
,箭头函数中的this
将是全局对象或undefined
,这两者对您来说都是无用的。使用function
来捕获this
,或者更好的是,使用单击事件的 currentTarget 来获取对单击按钮的引用。 - 元素的
.innerHTML
returns 字符串,不是元素。如果它包含可以强制转换为数字的字符串,则显式地将其强制转换为数字。 (如果HTML内容是只有可以强制转换成数字的字符串,应该用.textContent
代替——只有在有意的时候才用.innerHTML
设置或检索 HTML 标记,而不是纯文本) - 更好的方法是将
i
传递给onSquareClick
而不是使用 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,则不应使用像
panelContent.innerHTML = number;
这样的原始 DOM 操作 - 相反,设置视图使用的 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();
};
我建议您查看介绍性的 React 教程,看起来您可能会从学习 React 生态系统中的过程中受益,而不是试图将您对 vanilla JS DOM 的理解与 React 混为一谈。