在 ReactJS 的 textarea 中添加行号答案

【问题标题】：Adding line numbers in textarea in ReactJS在 ReactJS 的 textarea 中添加行号
【发布时间】：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 代码吗？

标签： javascript html jquery reactjs textarea

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

【讨论】：