除非通过 addEventListener，否则无法让 React 对按钮单击采取行动

Question

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

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

其中 togglePop 是 class 呈现文档中的一个函数（如以下代码所示）。但是它会产生错误 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/，但我仍然无法解决内联问题。出于无奈，我尝试了多种方法，下面留给大家娱乐，如果没有别的。请参考渲染方法中的按钮声明。

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>

Answer 1

在我看来，您没有正确绑定事件处理程序，因为您的渲染函数包装在 "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 包装）？

Answer 2

因为它使用的是超脚本标记标记 (HTM)，其部分位于 `html 包装器中），所以在 '{' 前面需要一个 '$'。内联定义应该是：

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

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

除非通过 addEventListener，否则无法让 React 对按钮单击采取行动

Cannot get React to act on button click except via addEventListener

javascript

reactjs

preact