时间戳

首页 > 解决方案 > 当使用 ReactDOMServer 和 innerHTML 时，JavaScript 函数调用在表格下拉列表中不起作用

javascript - 当使用 ReactDOMServer 和 innerHTML 时，JavaScript 函数调用在表格下拉列表中不起作用

问题描述

JavaScript 函数调用在由 innerHTML 添加到 DOM 的表下拉列表中不起作用

  employeesRetrieval = e => {

    axios.post('http://localhost:5000/employeesRetrieval')
      .then( res => {

        let totalActiveEmployees = res.data[0];

        let activeEmployeesAdder = ``;

          totalActiveEmployees.forEach( ele => {

            let role = '';
            if(ele.empRole === 0){
              role = 'Admin';
            }else{
              role = 'Employee';
            }
            activeEmployeesAdder += ReactDOMServer.renderToString(
                                    <tr>
                                      <td>{ele.empId}</td>
                                      <td>{ele.empName}</td>
                                      <td>{ele.empEmail}</td>
                                      <td>{role}</td>
                                      <td className = "editColumn">

                                        <div className="btn-group">
                                          <button className="noCaret" data-toggle="dropdown" title = "Edit">
                                            <MoreVertical className = "editIcon" id = "editIcon"/>
                                          </button>
                                          <ul className="dropdown-menu" role="menu">
                                            <li className = "dropdown-item" role = "button" name = {ele.empId} onSelect = {() => this.showEmployeeUpdateModal('active', ele.empId)}>Edit details</li>
                                            <li className = "dropdown-item" role = "button" name = {ele.empId} onSelect = {() => this.directEmployeeStatusChange('inactive', ele.empId)}>Make inactive</li>
                                          </ul>
                                        </div>

                                      </td>
                                    </tr>
                                  );
          });
          document.getElementById('activeEmployeesLoader').style.display = "none";
          document.getElementById('activeEmployeesTableContent').innerHTML = activeEmployeesAdder;

桌子

打开下拉菜单后：

打开下拉列表的表格

单击它们后没有响应或错误。我尝试更改所有内容，例如 onClick 属性并将ul和li更改为选择和选项标签。似乎没有什么对我有用。

两个功能：

showEmployeeUpdateModal = (e, id) => {
      console.log('INSIDE THE FUNCTION');
      /*
         SOME LOGIC
      */
    };

directEmployeeStatusChange = (e, id) => {
      console.log('INSIDE THE FUNCTION');
      /*
         SOME LOGIC
      */
    };

标签： javascripthtmlreactjsinnerhtmlreact-dom-server

解决方案

您正在使用ReactDOMServer.renderToString包含事件侦听器的代码块。

顾名思义，renderToString它为您提供纯 HTML，因此事件处理程序不会像编写的那样工作。

看看类似的问题React.js Serverside rendering and Event Handlers

推荐阅读