如何在反应中在 innerHTML 中设置 onclick 功能？答案

【问题标题】：How to set an onclick function in innerHTML in react?如何在反应中在 innerHTML 中设置 onclick 功能？
【发布时间】：2019-10-14 10:53:36
【问题描述】：

我想在反应中调用innerHTML中的一个函数

我的代码是 -

changeLength() {
        console.log("tested Anurag")
        this.refs.changemanager.innerHTML = "<span>" +
            this.state.user.manager.fullname + "</span> <a style={{ cursor: 'pointer' }} onClick={" + this.changeLength12.bind(this) + "}>...</a>";
    }

changeLength12() {
        console.log("tested Anurag1")
        this.refs.changemanager.innerHTML = "<span>" +
            this.state.user.manager.fullname.substring(0, 3) + "</span> <a style={{ cursor: 'pointer' }} onClick={this.changeLength.bind(this)}>...</a>";
    }

我的 changeLength 函数工作正常，但 changeLength12 不工作。那么如何让它发挥作用呢？

【问题讨论】：

那么我们如何在innerHTML中传递函数引用呢？
我认为上述情况this在函数执行时不会被定义，你应该使用附加的onclick动态渲染元素，我已经发布了可能的解决方案
@warl0ck 我们该怎么做？你能告诉我吗？
@warl0ck 我希望两者都应该使用 onClick 事件进行更改

标签： reactjs onclick innerhtml

【解决方案1】：

您可以尝试类似的方法：

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fullName: "Stackoverflow user"
    };
  }

  changeLength12() {
    console.log(" called from length 12");
  }

  changeLength() {
    console.log(" called from changelength");
  }

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <span>{this.state.fullName}</span>
        <a
          href="/"
          style={{ cursor: "pointer" }}
          onClick={this.changeLength12.bind(this)}
        >
          ...
        </a>
        <span>{this.state.fullName.substring(0, 3)}</span>
        <a
          href="/"
          style={{ cursor: "pointer" }}
          onClick={this.changeLength.bind(this)}
        >
          ...
        </a>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：