如何在反应中在innerHTML中设置onclick function？

Question

I wanna call a function inside innerHTML in react

my Code is -

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>";
    }

my changeLength function is working fine but changeLength12 is not working. So how to make it working?

Answer 1

You can try instead something like:

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);