在草稿js中插入字符时如何向右滚动？

【问题标题】：How can I scroll right when inserting a character in draft js?在草稿js中插入字符时如何向右滚动？
【发布时间】：2021-04-08 02:00:20
【问题描述】：

使用 Draft-js 和样式化组件，我创建了一个用于计算器的内联输入。当我用键盘输入它时，它按预期工作：

当我按下加号按钮时，文本中会添加一个“+”，但视图不会滚动：

下面是代码沙盒中的行为和代码： https://codesandbox.io/s/charming-brattain-mvkj3?from-embed=&file=/src/index.js

当像这样以编程方式添加文本时，如何让视图滚动？

【问题讨论】：

如果你可以使用codesandbox之类的东西创建一个可重现的sn-p会容易得多
@MoshFeu 好主意——我现在包含了一个代码框链接。

标签： javascript css reactjs styled-components draftjs

【解决方案1】：

终于，我想出了一个解决办法。我将此添加到计算器输入组件中：

const shell = React.useRef(null);
const [scrollToggle, setScrollToggle] = React.useState(
  { value: false }
);

React.useEffect(() => {
  const scrollMax = shell.current.scrollWidth - shell.current.clientWidth;
  shell.current.scrollLeft += scrollMax;
}, [scrollToggle]);

const scrollToEnd = () => {
  setScrollToggle({ value: !scrollToggle.value });
};

然后在 insertChars 函数的最后我添加了scrollToEnd();。

我将ref={shell} 设置为<InputShell>

【讨论】：