如何将单词更改为文本字段或输入字段的下拉菜单？

Question

I am building custom spellchecker in React.js and I am stuck in changing the word into the dropdown menu to select the correct word. Please help.

I am doing research on it from a long time but to no avail.

Answer 1

Since you're looking for a general approach, here's how I would approach this problem.

When a word is misspelled, replace it with a React component containing two children: the text displaying the misspelled word, and your 'replacement word' select box. Fill the select with possible replacement words.

Use a React Synthetic Event ( onMouseOver ?) to toggle between displaying the components-- select on mouse over, display text otherwise. I might suggest onClick , since I think that's easier to use and more mobile-first.

When the user selects one of the replacement words, the word is no longer evaluated as misspelled, and the entire parent component unmounts, replaced by the correctly spelled word.

React Synthetic Events docs