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
*/
};