Inputfield / React Quill上的onChange引起的React无限循环

Question

我新的反应，只需要更新一个值在onChange过滤一些标签。但是当我这样做的时候，它会导致一个无限循环。我怎样才能避免呢?

const Editor = ({ onChange, name, value }) => {
const modules = {
toolbar: [
[{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
[{size: []}],
['bold', 'italic', 'underline','strike', 'blockquote'],
[{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
['link'],
['clean']
],
clipboard: {
matchVisual: false
}
}
return (
<ReactQuill
theme="snow"
value={value}
modules={modules}
onChange={(content, event, editor) => {
const cleanedContent = content?.replace(/<p><br></p>/g, '<br>');
console.log('test');
onChange({ target: { name, value: cleanedContent  } });
}}/>
);
};
export default Editor;

Answer 1

您可以手动替换和设置标签，因此组件不会无限呈现，输出是一个干净的字符串。通过这种方式，ReactQuill组件认为已经存在<p>和<br>标签，并且不会自动设置它们。

<ReactQuill
value={!value ? '<br>' : `<p>${value}</p>`}
onChange={(val: string) => {
handleUpdate(val.replaceAll(/</?p[^>]*>/g, '').replace('<br>', ''));
}}
/>