如何在组件装载时从文本区域获取字符数

Question

>我正在尝试反应，在应用程序中有 2 页。Home和Details页面。从Home导航到Details页面时，有一个字符计数部分，显示textarea中的字符数。组件functional。

// textarea reference
const textareaEl = useRef(null);
// character count
const [count, setCount] = useState(0);
useEffect(() => {
// some init functions.
const length = textareaEl.current.value.length;
setCount(length);
}, []);

在这里，lengthconst 变量记录文本区域中字符的长度，但不使用setCount()设置count。

但在其他事件中，count设置在keyUp事件中

// Handle keyup
const handle_key_up = (e) => {
// console.log(e.target.value.length);
setCount(previousState => {
previousState = parseInt(e.target.value.length);
return previousState;
});
}

textareahtml 是

<textarea ref={textareaEl} onKeyUp={handle_key_up} name="content" value={book.content} onChange={handleChange}></textarea>

是useEffect是设置count变量的地方。

更新我出错的地方是;useEffect钩子内部有一个init函数。这是一个异步函数。这就是用文字填充文本区域的原因。所以我在承诺解决部分中调用了字符计数设置部分。

Answer 1

useEffect(() => {
// some init functions.
const length = textareaEl.current.value.length;
setCount(length);
}, [count]);

useEffect hook 中的第二个参数指定何时调用钩子。在这种情况下，由于要计算字符数，因此可以指定计数状态。