Using react draft wysiwyg with the new version of React development, it is found that the toolbar (Toolbar) to add pictures, add emoticons, add images, text drop-down list and other clicks are invalid.
phenomenon
Use the React project created by the new version of Create React App to introduce react draft wysiwyg as the text editor.
When the page is running, clicking the drop-down list of the toolbar, adding emoticons, images, etc. does not respond.
View the console. When the page is loaded, the following warnings appear:
Warning: Can’t call setState on a component that is not yet mounted.This is a no-op, but it might indicate a bug in your application.Instead, assign to this.state directly or define a state = {}; class property with the desired state in the r component.
At this time, the functions of text input, bold text and italic text are normal, but the buttons with "pop-up window" such as inserting pictures and links do not respond or report errors after clicking.
reason
I am not a professional front-end. From the discussion on Git, it seems that this problem is caused by the fact that the React 18 project created uses Strict Mode by default.
I don't quite understand the reason, nor do I understand why a 2020 issue has not yet been repaired (the author has not approved others to pull request to fix this problem).
Of course, as I said, I am not a professional front-end.
solve
unremittingly
If you insist on using react draft wysiwyg, it is most convenient to disable strict mode in index.js:
root.render( //Disable StrictMode // <React. StrictMode> <App /> // </React. StrictMode> );
to open or find a new path or snap course
Select React Quill and other similar plug-ins.
