重新渲染行数 React答案

【问题标题】：Rerender line count React重新渲染行数 React
【发布时间】：2021-12-27 19:23:22
【问题描述】：

我正在尝试基于 React 创建类似于在线文本编辑器的东西。我想在 textarea 附近添加一个 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 功能，或者至少我没有找到如何使用。有人能帮我吗？谢谢

【问题讨论】：

标签： javascript reactjs jsx

【解决方案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;

【讨论】：