JavaScript вызовы функций не работают внутри выпадающего списка, когда используются ReactDOMServer и внутренний HTML - PullRequest
Новая
       17

JavaScript вызовы функций не работают внутри выпадающего списка, когда используются ReactDOMServer и внутренний HTML

0 голосов
/ 16 февраля 2020

JavaScript вызовы функций не работают внутри выпадающего списка, который добавляется в DOM внутренним HTML

  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;

Table

После открытия раскрывающегося списка:

Table with dropdown opened

После нажатия на них не получено ответа или ошибки. Я попытался изменить все, например, атрибуты onClick и изменить ul и li на , выбрать и , тег . Мне кажется, ничего не работает.

Две функции: 

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

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

1 Ответ

1 голос
/ 16 февраля 2020

Вы используете ReactDOMServer.renderToString в этом фрагменте кода, который включает в себя прослушиватели событий.

Как следует из названия, renderToString дает вам простое HTML, поэтому обработчики событий не будут работать как * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *.

...