除了通过 addEventListener 之外，无法让 React 对按钮单击采取行动

如何解决除了通过 addEventListener 之外，无法让 React 对按钮单击采取行动

我想知道在尝试使用 reactjs 执行 onclick 处理程序时我做错了什么，对于一个按钮，在指定内联时。我让它工作的唯一方法是使用 addEventListener。

据我所知，这应该有效：<button onClick={this.togglePop}>Modify</button>

其中 togglePop 是呈现文档的类中的函数（如下面的代码所示）。但是它会产生错误 Uncaught TypeError: this.l[l.type] is not a function at HTMLButtonElement.P (preact.min.js:1)

我确实让它工作的方式是使用 document.getElementById("modify10").addEventListener('click',this.togglePop);

我使用的是 Chrome 浏览器。这是我第一次使用 React，我没有做过很多 javascript。在众多网站中，我发现的最好的网站之一是 https://www.debuggr.io/react-setstate-is-not-a-function/，但我仍然无法解决内联问题。出于沮丧，我尝试了多种方法，如果没有别的，仍然在下面供您娱乐。请参考render方法中的按钮声明。

class DashSettings extends Component {
  state = {
  system_id: null,system_name: null,seen_systemid_popup: false
  };
  togglePop = () => {
    console.log("a");
    this.setState({
      seen_systemid_popup: !this.state.seen_systemid_popup
    });
  }
  
  componentDidMount() {
    axios.get('/api/cfg/get')
        .then(r => this.setState(r.data))
        .catch(e => console.log(e));
    var self = this;
    var f = function(reader) {
      return reader.read().then(function(result) {
        var data = String.fromCharCode.apply(null,result.value);
        self.setState(JSON.parse(data));
        if (!result.done) return f(reader);
      });
    };

    // ********* This gets the modify10 button to work ************************
    document.getElementById("modify10").addEventListener('click',this.togglePop);
  }
  
  render(props,state) {
    return html`<div id="dashboard">
    <table id="settings_table">
      <tr><th></th><th><h5>Current Setting</h5></th></tr>
        <tr><td><div class="setting_label">System Id:   </div></td>
        <td><div class="setting_value">${state.system_id}</div></td>
        <td>
          <div>
          <!-- Unless stated otherwise,all buttons below generate this error: Uncaught TypeError: this.l[l.type] is not a function at HTMLButtonElement.P (preact.min.js:1)
          I even tried both onclick and onClick -->
          <button class="btn btn-outline-secondary btn-sm" id="modify1" onClick={this.togglePop}>Modify1</button>
          <button class="btn btn-outline-secondary btn-sm" id="modify2" onClick="{this.togglePop}">Modify2</button>
          <button class="btn btn-outline-secondary btn-sm" id="modify3" onClick="{() => this.togglePop}">Modify3</button>
          <button class="btn btn-outline-secondary btn-sm" id="modify4" onClick={this.togglePop()}>Modify4</button>
          <button class="btn btn-outline-secondary btn-sm" id="modify5" onClick="{this.togglePop()}">Modify5</button>
          <!-- button class="btn btn-outline-secondary btn-sm" onClick={() => this.togglePop}>Modify6</button> -->
          <button class="btn btn-outline-secondary btn-sm" id="modify7" onClick={this.props.togglePop}>Modify7</button>
          <button class="btn btn-outline-secondary btn-sm" id="modify8" onClick={props.togglePop}>Modify8</button>
          <!-- <button class="btn btn-outline-secondary btn-sm" id="modify9" onClick={() => this.togglePop()}>Modify9</button>
          Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name. -->
          <button class="btn btn-outline-secondary btn-sm" id="modify10">Modify10</button>
        ...

上面的代码是在app.js中使用的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>example</title>
    <Meta charset="utf-8" />
    <Meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="preact.min.js"></script>
    <script src="preact-router.min.js"></script>
    <script src="htm.min.js"></script>
    <script src="history.min.js"></script>
    <script src="linkstate.min.js"></script>
    <script src="axios.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body></body>
</html>

解决方法

在我看来你没有正确绑定事件处理程序，因为你的渲染函数被包裹在“html``”中

<button class="btn btn-outline-secondary btn-sm" id="modify1" onClick={this.togglePop} // <-- seems to be string not an actual interpolation>Modify1</button>

您可以尝试通过仅返回 jsx 来使用渲染吗（即，只需删除 html 包装）？

因为它使用的是 Hyperscript Tagged Markup (HTM)，在 `html 包装器中包含了一个部分)，所以在 '{' 之前需要一个 '$'。内联定义应该是：

<button onClick=${this.togglePop}>Modify</button>

对于 HTM，请参阅 github.com/developit/htm