如何在react html解析器中使用事件

Question

getrow是我创建动态输入框的函数。我希望为每个输入框接收onchange事件。我正在使用ReactHtmlParse，但不允许这样做。还有别的办法吗？

getRow = (row, column) => {
input_fields = '';
input_fields+='<table><tbody>'
for (const [key, value] of Object.entries(this.state.dataObj[column.dataIndex])) {
console.log(key)
input_fields += '<tr><td>' + key + ':<br>' + '<input class="edit_fields" type="text" id='
+ key  + '>'+ '</td></tr>'
}
input_fields+='</tbody></table>'
row_data =input_fields
this.setState({ modalIsOpen: true }); }

<LVModal
width={240}
height={350}
title="Update Value"
onClose={this.closeModal}
closeOnOverlayClick
isMovable
isResizable
closeOnEsc
>
{ReactHtmlParser(row_data)}
<LVButton>Save</LVButton>
</LVModal>

Answer 1

这是我解决类似问题的方法。

import React from "react";
import { render } from "react-dom";
import parse from "html-react-parser";
const html = `
<div style="font-size:32px;">html-react-parser with js events</div>
<div>This is a long long long text.<div id="supportEmail"></div>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</div>
`;
const handlefunction = () => {
alert("Clicked");
};
const replace = (domNode) => {
if (domNode.attribs && domNode.attribs.id === "supportEmail") {
return (
<code>
<div
style={{
backgroundColor: "gray",
padding: "4px 8px",
width: "100px",
textAlign: "center"
}}
onClick={handlefunction}
>
Click
</div>
</code>
);
}
};
function App() {
return parse(html, { replace });
}
render(<App />, document.getElementById("root"));

检查Codesandbox 中的示例