使用react-hook-form手表计算字符数

Question

目前，我正在使用react-hook-form进行表单传输。而且，我想渲染输入和文本区域中包含的字符数。

我实现的代码如下。

<input
  id="title"
  type="text"
  placeholder="title"
  {...register('title', {
    required: true,
  })}
/>
<span>
  {watch('title').length}/20
</span>

如上所示，我尝试渲染通过watch输入的字符数，但失败了。你如何表示字符数？

Answer 1

使用未定义的条件更新您的手表。

{ watch('title') ? (watch('title').length)/20 : '' }

可以从这里检查工作代码：https://stackblitz.com/edit/stackoverflow-095 ?file=src%2FApp.jsx