如何使用 map 方法在 textarea 标签内添加动态内容

Posted 2023-02-21

【中文标题】如何使用 map 方法在 textarea 标签内添加动态内容

【英文标题】：how to add dynamic content inside a textarea tag using map method

【发布时间】：2021-11-18 08:25:17

【问题描述】：

我目前正在开发 chat application with sockets ，当我收到不同的消息时，我使用 array 然后使用 map 方法以简单的 html 标签显示它们，例如 p 等它运行良好，但在 text-area 内部它不起作用我也尝试使用 map 方法设置 text-area value 属性，但只有我看到是 [object object] 。还有当消息有更多消息时如何自动向下移动滚动条。

这是代码

import  Fragment, useEffect  from "react";
import  format  from "date-fns";
const Chat = ( name, message ) => 
  const date = new Date();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();

  console.log("so bteay", message);
  return (
    <Fragment>
      <div>
        <h3 className="d-inline-block me-3"> Chat log </h3>
        name && (
          <span className="me-3 d-inline-block">
            <div
              class="spinner-grow spinner-grow-sm text-success"
              style= fontSize: "10px" 
              role="status"
            >
              <span class="visually-hidden">Loading...</span>
            </div>
          </span>
        )
        <small className="text-muted d-block  "> name</small>
        <textarea
          cols="70"
          rows="8"
          value=message.map((eachMsg) => 
            return (
              <Fragment>
                
                  <small className="text-muted d-inline-block">`$hour:$minute:$second`</small>
                
                <p
                  className="d-block shadow p-1 fw-bold rounded text-success"
                  style= fontFamily: "cursive" 
                >
                  eachMsg
                </p>
              </Fragment>
            );
          )
        ></textarea>
      </div>
    </Fragment>
  );
;

export default Chat;

【问题讨论】：

在返回前打印“eachMsg”，看看它是否有字符串或对象，很可能你得到一个对象而不是文本

@SameeraMillavithanachchi 实际上我做到了，当我 console.log 它成功地将每个消息记录为文本而不是对象！

您无法在 textarea 中呈现 html。所以尝试使用以下 return eachMsg; ) >。片段>

【参考方案1】：

我认为您不能在 textarea 中设置 html 代码，除非您想将其显示为文本？

【参考方案2】：

您只能将 1 个子项（在本例中为文本）传递到文本区域。但是您正在尝试传递一个数组。如果您的目的是拥有与数组一样多的 textareas，那么您应该这样做：

const texts = ["Hi", "Bye","done"];

<div>
      texts.map((text) => (
        <textarea>text</textarea>
      ))
</div>

但如果您尝试在其中包含所有文本的 1 个文本区域，首先您需要使用 join 方法创建一个长字符串，然后渲染该字符串。