在 React 中追加后未定义 onclick 函数

Question

我目前正在从外部 API 获取数据，数据的格式和样式均使用 3 个按钮。然后我想在所有按钮上使用 onclick 功能，但是当我使用 onclick="myFunction()" 时，它会在控制台中打印 function is not defined。

import * as React from 'react';
function StagePage () {

function myFunction() {
console.log("test");
}

function apiCall() {
    fetch("API_URL")
        .then(response => response.json())
        .then(function (result) {
for (var i in result) {
            var match = '<div class="stage-match">'+
                '<div class="stage-kampe-odds">'+
                    '<button class="stage-kampe-odds-btn" onclick="myFunction()">Btn1</button>'+
                    '<button class="stage-kampe-odds-btn" onclick="myFunction()">Btn2</button>'+
                '</div>'+
            '</div>';

            document.getElementById("main-container").insertAdjacentHTML("afterbegin", match);
            }
        })
        .catch(error => console.log('error', error));
}
apiCall();

return (
<>
<div className="container" id="main-container"></div>
</>
)}
export default StagePage;

Answer 1

myFunction 在模块范围内，但 onclick 属性在该范围之外计算。

不要使用 DOM 将 HTML 注入您的 div。

相反，将您的数据放入 React 状态，并在生成 JSX 时从该状态读取。

您需要将调用移至 useEffect 挂钩内的 apiCall 以停止递归 re-renders.

React 网站上有一个 React + Ajax tutorial（尽管它使用 class 组件而不是函数组件）涵盖了这一点。

在 React 中追加后未定义 onclick 函数

Onclick function not defined after appending in React

javascript

html

reactjs

api

append