如何将 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 混为一谈。