如何将 innerHTML 传递给 onClick 函数（Typescript）

Question

我正在尝试将 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();
}

Answer 1

你的问题还真不少。

你应该尽最大努力避免在 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 混为一谈。

如何将 innerHTML 传递给 onClick 函数（Typescript）

How can I pass innerHTML to an onClick function (Typescript)

javascript

reactjs

typescript

fluentui-react