在 ReactJS 的 textarea 中添加行号

Posted 2023-05-07

【中文标题】在 ReactJS 的 textarea 中添加行号

【英文标题】：Adding line numbers in textarea in ReactJS

【发布时间】：2020-11-16 10:48:55

【问题描述】：

我通过以下链接在我的 ReactJS 组件中的 textarea 中显示行号。

html adding line numbers to textarea

这行有一个完美的解决方案，链接是this。

此链接在演示中运行良好，但是当我在我的 ReactJS 代码中使用它时，它不起作用。以下是我实施的方式

Index.html：

在这个文件中，我是这样导入我的 JS 文件的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery-linedtextarea.js"></script>
  <link href="jquery-linedtextarea.css" type="text/css" rel="stylesheet" />
<script>
  $(function() 
    $(".lined").linedtextarea(
      selectedLine: 1
    );
  );
</script>

EditorModal.js： 然后在这个文件中，我使用textarea 作为：

<textarea class="lined" id="lined" rows="10" cols="60">javascript was originally developed by Brendan
   Eich of Netscape under the name Mocha,
   which was later renamed to LiveScript,
   and finally to JavaScript.
</textarea>

执行此操作后，我在 textarea 中看到了任何行号。如何使用带有 textarea 标签的 thorse JS 文件？

【问题讨论】：

这些导入发生在哪里？在index.html?您构建的应用程序 JS 文件在哪里导入？该 jQuery 代码需要在您的应用渲染后运行。

@Jayce444 是的，导入在index.html。 JS 文件位于 src 文件夹中。但是当我在组件中使用这个 JQuery 代码时，我得到错误TypeError: Cannot read property 'fn' of undefined。我可以在类组件中使用 JQuery 代码吗？

【参考方案1】：

React 中的表单元素不同。 textarea 是自闭合标签，你也不能在 react 中使用 class，因为它是 javascript 中的保留关键字，你应该使用 className 来代替。除了使用插件之外，还有一种更简单的方法来多行你的 textarea 值。您正在使用反应，这意味着您可以改用对象文字。如果您正在使用 react，请将您的 EditorModal.js 文件更改为如下所示，并且一切都应该没问题。

import React from 'react';

class EditorModal extends React.Component 

    state = 
        textarea: `
        JavaScript was originally developed by Brendan
        Eich of Netscape under the name Mocha,
        which was later renamed to LiveScript,
        and finally to JavaScript.
        `
    
    render()
        return (
            <div>
            <textarea 
                className="lined" 
                id="lined" 
                rows="10" 
                cols="60"
                value=this.state.textarea 
                />
            </div>
        )
    


export default EditorModal

如果您已将 react 添加到您的网站并且尚未创建简单的页面响应应用程序，您也可以将以下内容添加到 EditorModel.js。记得将 JSX 脚本也添加到您的代码中。你也可以使用这个guideline：

'use strict';

class EditorModal extends React.Component 

  state=
    textarea: `
      JavaScript was originally developed by Brendan
      Eich of Netscape under the name Mocha,
      which was later renamed to LiveScript,
      and finally to JavaScript.
    `
  

  render() 

    return (
        <textarea 
          className="lined" 
          id="lined" 
          rows="10" 
          cols="60"
          value=this.state.textarea 
        />
    );
  



ReactDOM.render(<EditorModal />, document.getElementById('root'));