时间戳

首页 > 解决方案 > 在草稿js中插入字符时如何向右滚动？

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

问题描述

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

在此处输入图像描述

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

在此处输入图像描述

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

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

标签： javascriptcssreactjsstyled-componentsdraftjs

解决方案

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

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>

推荐阅读