时间戳

首页 > 解决方案 > 组件安装时如何从文本区域获取字符数

javascript - 组件安装时如何从文本区域获取字符数

问题描述

我正在尝试做出反应，在应用程序中有 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 变量记录 textarea 中字符的长度，但没有设置count使用setCount().

但在其他事件中，在事件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变量的地方。

更新 我错的地方是；钩子里面有一个init函数。useEffect这是一个异步函数。它就是用文字填充文本区域的东西。所以我在 promise resolve 部分调用了字符数设置部分。

标签： javascriptreactjsreact-hooksuse-effectuse-state

解决方案

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

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

推荐阅读