如何在js中定义一个按钮和一个函数（React）答案

【问题标题】：How to define a button and a function inside js (React)如何在js中定义一个按钮和一个函数（React）
【发布时间】：2021-12-29 16:02:33
【问题描述】：

我正在使用 MapBox 来渲染地图。我做了一个onClick 函数，当点击地图时，它通过api显示下面屏幕截图中显示的地理编码信息。

现在我想要的是在表格下方有一个按钮，当点击它时我希望它执行特定的功能，我已经定义了它但是当点击它时显示Function is not defined
代码

map.current.on('click', function(e) {

        var coordinates = e.lngLat;
        var lng = coordinates.lng;
        var lat = coordinates.lat;
        console.log(lat);
        console.log(lng);
        var d = fetch("https://api.mapbox.com/geocoding/v5/mapbox.places/" + lng + "," + lat + ".json?access_token={token_value}").then(response => response.json()).then(function(data) {
          console.log(data)
          var str = "<table border='1'><tr><td><center>Title</center></td><td><center>Content</center></td></tr>"
          for (let i in data["features"]) {
            str = str + "<tr><td style='padding:5px'>" + data["features"][i]["place_type"][0] + "</td><td style='padding:5px'>" + data["features"][i]["place_name"] + "</td></tr>"

          }

          str = str + "</table>"
          
          // button
          str = str + "<button onClick={myFunction}>Save</button>"

          function myFunction() {
            console.log('Saved pressed');
          }
          
          new mapboxgl.Popup()
            .setLngLat(coordinates)
            .setHTML(str)
            .addTo(map.current)
        });
        console.log(d);
      });

【问题讨论】：

该字符串可能不会被解释为反应，我猜它只是普通的 HTML。试试
@IrkenInvader 我试过myFunction() 它不起作用
您是否也按照建议尝试将您的功能上移到范围内？
@akds 是的，我做到了

标签： javascript reactjs mapbox

【解决方案1】：

修复代码如下

// button
str += `<button onclick="myFunction()"}>Save</button>`;

【讨论】：

获取错误为Uncaught SyntaxError: Unexpected end of input
抱歉，我编辑了我的答案。再试一次。
我已经添加了 += ，但仍然是同样的错误。
没有 onClick myFunction 渲染效果好吗？
问题不在于渲染。当我单击按钮时，而不是在功能中提到的在控制台中打印，它只会给出错误。

【解决方案2】：

我猜按钮（以及为其定义的函数名称）的创建范围与您定义函数的范围不同。其中一种可能有效：

将您的函数定义为const myFunction = () => console.log("saved pressed")。
尝试将您的函数引用为this.myFunction

【讨论】：

它没有给出任何输出也没有任何错误，尝试调试但还是一样。
我会尝试使用浏览器检查元素并确保某些内容实际上被定义为按钮的 onClick 属性。此外，这不是一个很好的解决方案，但您可以使用按钮 html 内联定义您的 javascript。 <button onclick={console.log("hello world")}>Save</button>
尝试检查它确实显示了该功能，但现在得到的错误为Uncaught SyntaxError: Unexpected end of input。现在我已经在另一个 js 文件中定义了该函数并将其导入到主 js 文件中。