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

Question

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

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

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

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

Answer 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();。

然后我在 <InputShell>

上设置了 ref={shell}

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

How can I scroll right when inserting a character in draft js?

javascript

css

reactjs

draftjs

styled-components