Вызов функции путем добавления события onclick через внутренний HTML внутри класса реакции

Question

Как вызвать функцию, добавив событие onclick в класс реагирования через внутренний HTML

document.getElementById('activeEmployeesTableContent').innerHTML = `
                                    <tr>
                                      <td>${res.data.empId}</td>
                                      <td><button onclick = ${this.fun}>CLICK</button></td>
                                    </tr>
                                  `;

Приведенный выше код не работает, но я должен использовать внутренний HTML для динамического добавления кода в тело стола

  componentDidMount(){
     axios.post('http://localhost:5000/employeesRetrieval')
      .then( res => {
          document.getElementById('activeEmployeesTableContent').innerHTML = `
                                  <tr>
                                    <td>${res.data.empId}</td>
                                    <td><button onclick = ${this.fun(res.data.empid)}>CLICK</button></td>
                                  </tr>`;
      }).catch( err => {
        console.log(err);
      });
  }

Answer 1

Это кажется касательным к React, однако вы обычно добавляете функцию onclick отдельно от определения innerHTML. Я бы порекомендовал опираться на API DOM, если этот маршрут вы пытаетесь go вниз.

const t = document.getElementById('table');
const row = document.createElement('tr');
const id = document.createElement('td');

// Set up the first element in the table
id.innerHTML = ele.empId;
row.appendChild(id);

// Set up the button
const btn = document.createElement('button');
btn.innerHTML = 'CLICK';
btn.addEventListener('click', func);
row.appendChild(btn);

// Add the row to the table.
table.appendChild(row);

Этот подход является чрезмерно обязательным и, как правило, не хватает фреймворка, поэтому я бы не рекомендовал что-то делать нравится. Фреймворки, такие как React, существуют, чтобы помочь управлять сложностью. React обрабатывает взаимодействия с DOM для вас, поэтому вы можете сосредоточиться на бизнес-логике c вашего приложения.

Answer 2

реакция - это совсем другое, вы не можете добавить реакцию простым html.