Javascript 如何使用React在用户键入时更改输入部分的样式？

与许多标记编辑器类似，我希望能够在用户键入时修改输入字段的部分。例如：

如果用户在键入结束下划线时立即键入上述内容，则文本的样式应如下所示

---

然后，如果删除其中一个（现在已褪色且为灰色）下划线，它将恢复为纯文本，依此类推。

您可以添加样式化组件，以便能够动态更改输入的样式。并添加链接到输入的事件，如onKeypress