无涯教程网

Reactjs 如何在React中的textarea中显示字符数

发布于01月31日

我一直试图制作一个"假的"文本区，以显示我的文本区的"内部"字符数，like this，但我想不出如何让它正确聚焦.

我的解决方案是创建一个带有文本区域样式的父div、一个没有样式的文本区域和一个字符计数器来创建一个假的文本区域:

<div> // textarea styling
  <textarea />
  <div style={{display: 'flex', justifyContent: 'flex-end'}}>{counter}/2000</div>
</div>

它看起来与上面的示例类似，但我在关注父div时遇到了问题.我需要在视觉上显示它在焦点上. 我使用了useRef挂钩来聚焦父div，但它不起作用.

const ref = useRef(null);

<div ref={ref}>
  <textarea onClick={() => ref.current.focus()} />
  //...
</div>

下面是一个https://codesandbox.io/p/sandbox/custom-textarea-ypl4rj的例子

甚至可以触发div的焦点状态吗？也许我用错了事件？

推荐答案

不是所有的HTML元素都可以接收焦点-请参阅这answer.

相反，请将ref-parent的样式更改为使用:focus-within而不是:focus(sandbox):

.ref-parent:focus-within {
  border: 1px solid blue;
  outline: 1px solid blue;
}

Reactjs相关问答推荐

重定向React路由中没有根文件夹的所有路径匹配

全局上下文挂钩-替代不起作用

Next.js-图像组件加载问题

Npm运行构建`在Next.js 14中不起作用

单击空白区域时，Reaction Multiple下拉组件不关闭

不同步渲染

当列表中的项的顺序改变并且使用唯一键作为它们的索引时，Reaction如何看待呈现方面？

安装使用环境的BIT组件的依赖项

在ReactJS的monaco编辑器中添加美人鱼语法

在 golang 服务器中刷新或直接 url 路径时响应 404

获取  不能显示为  的后代.错误，但不太确定如何构建我的代码以避免此警告

显示我是否加入聊天应用程序时出现问题

useEffect 渲染没有依赖数组的组件

如何在 ReactJS 中提交后删除 URL 中的查询参数

setState 改变对象引用

getAttribute 函数并不总是检索属性值

如何在自定义 JSX 元素上声明属性？

使用 yarn 编译 protobuf js 时出现错误pbjs： command not found

axios post方法中的请求失败，状态码为500错误

下拉菜单在 AppBar 中未正确对齐

实用课程推荐

相关教程推荐