ReactJS 未定义 onClick 属性答案

【问题标题】：ReactJS undefined onClick attributeReactJS 未定义 onClick 属性
【发布时间】：2021-03-07 15:16:57
【问题描述】：

我是 ReactJS 的初学者。我在 div 中添加 HTML 代码，此 HTML 代码用于按钮，它可以工作，但 onClick 属性始终未定义。我尝试了两件事，但它不起作用。

第一次尝试：

const createListPlaylist = (res) => {
    if (res === undefined)
        return;
    var list = "";
    for (let i = 0; i < res.data.items.length; i++)
        list += `<Button onClick=${createPlaylistWidget(res.data.items[i].id)}>${res.data.items[i].name}</Button><br>`;
    document.getElementById("PlayListViewer").innerHTML += list;
}

第二次尝试：

const createListPlaylist = (res) => {
    if (res === undefined)
        return;
    var list = "";
    var listArray = [];
    for (let i = 0; i < res.data.items.length; i++) {
        listArray.push(createPlaylistWidget(res.data.items[i].id));
        list += `<button onClick=${displayPlaylitSelected(listArray[i])}>${res.data.items[i].name}</button><br>`;
    }
    document.getElementById("PlayListViewer").innerHTML += list;
}

结果：

createListPlaylist 在 axios 请求之后调用，res 参数是请求的响应，是的 res.data.items[i].id 是正确的，我可以在控制台中毫无问题地打印。因此，请寻求您的帮助，因为我不知道为什么我的 onClick 属性未定义并且我找不到答案。

提前感谢您的回答。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您需要在 React 中将函数传递给 {} 内的事件；

...
.... onClick={()=>${.....}}

【讨论】：

【解决方案2】：

它是onClick 而不是onclick。修改该更改，它将起作用。

react 中几乎所有的 props 都应该用 camelCase 编写。如果您希望元素出现在 dom 中，那么您可以将其写成小写。

另外请注意，aria-* 属性和data-* 数据属性在这种情况下存在例外情况。

【讨论】：

在 React 中实际上是 onClick，但在纯 HTML 中是 onclick。
纠正我的朋友，但它出现在 HTML Dom 中的原因是因为它已以小写形式传递。如果作为camelCase（onClick）传递，则不会出现在截图中。
@Knick，它已经通过camelCase，它在HTML中呈现小写
如果你检查一个 react 项目，你不会在 HTML 中看到任何 onclick 属性。你在这里看到它是因为按钮不是 React，它是一个字符串文字。
解释见this answer。

【解决方案3】：

JSX 不是 HTML

您不能创建一个 JSX 字符串并期望它作为一个组件或使用 JSX 语法。 JSX 只是编写 JavaScript 函数调用的一种更简洁/更简单的方式（特别是 React.createElement()。

不幸的是，您提供的代码没有简单的修复方法，它需要您重新思考 React 中的问题，但我可以指出问题区域。

您不能将字符串视为组件。
在使用 react 时，使用 document.getElementById().innerHTML 几乎总是一种反模式。
在 React 中分配事件处理程序时，您必须向它传递一个函数引用，而是调用一个函数并将其返回值分配给onClick。

【讨论】：