重新渲染行数 React

Question

我正在尝试创建基于 React 的在线文本编辑器之类的东西。我想在文本区域附近添加一个 div 来计算我当前正在使用的行。因此，我创建了一个计算文本区域中行数的函数，然后添加了一个获取该数字并创建该列表的元素。问题是，当我渲染时，它会正确地创建列表，但是当我写东西时，它不会重新渲染。问题是当我写东西时，它不会重新呈现。这是我的代码：

const Editor = () => {
    const [text, setText] = useState('//');

    const handleChanges = (e) => {
        setText(e.target.value);   
    }

    const countLine = () => {
        let lines = text.split(/\r|\r\n|\n/);
        let count = lines.length;
        return  count;
    }

    return <>
        <form className="editor">
            <div>
                <li>{/*this is where i create the numbers*/}
                {<ul>{Array.from(Array(countLine), (e, i) => {
                    return <li key={i}>{i}</li>
                    })}</ul>}
                </li>
            </div>
            <textarea name="text" value={text} className="editorText" onChange={handleChanges} spellCheck="false" 
            id = {bg}></textarea>
        </form>
    </>
}

我希望当我进行更改时，代码会自动更新行数，但我无法使用 handleChanges 函数，或者至少，我没有找到方法。有人能帮我吗？谢谢

Answer 1

解决了添加新状态值的问题，每次有变化时，都会重新计算。然后，重新创建数字。这是代码：

import { useState } from "react";

const Editor = () => {
    const [text, setText] = useState('//Your code');
    const [line, setLine] = useState(1);


    const handleChanges = (e) => {
        setText(e.target.value); 
        setLine(countLine); 
    }

    const countLine = () => {
        let lines = text.split(/\r|\r\n|\n/);
        let count = lines.length;
        console.log(count);
        return  count;
    }

    return <>
        <form className="editor">
            <div>
                <div class="number"> 
                    <ul>
                        {Array.from(Array(line), (e, i) => {
                            return <li key={i}>{i + 1}</li>
                        })}
                    </ul>
                </div>
            </div>
            <textarea name="code" value={text} className="editorText" onChange={handleChanges} spellCheck="false" 
            id = {bg}></textarea>
        </form>
    </>
}

export default Editor;

重新渲染行数 React

Rerender line count React

javascript

jsx

reactjs