时间戳

首页 > 解决方案 > 将 React MUI 文本字段中的值拆分为字符串数组

javascript - 将 React MUI 文本字段中的值拆分为字符串数组

问题描述

我目前正在使用 React 和 Material UI 为一个项目创建一个网页，该网页允许编辑者编辑书面脚本。如果这是一个基本问题，我提前道歉，因为我对 React 还很陌生。

该页面由一个文本字段组成，如下所示：[1]：https ://i.stack.imgur.com/v23Oi.png

我首先将查询中的段 (string[]) 组装到文本字段中，如下所示：

const scriptCompiledSegments = (() => {
    let script = "";
    _.forEach(segments, segment => {
      script += segment;
    });
    return script;
  })();

然后我按如下方式显示编译后的脚本：

 <TextField
            InputProps={{
              classes: {
                input: classes.input,
              },
            }}
            id="script-field"
            margin="normal"
            multiline
            rows={35}
            variant="outlined"
            defaultValue={scriptCompiledSegments}
            onChange={(event) => {
              setEditedScripts({ updatedSegments: (event.target.value) })
            }}
          />

目前， event.target.value 以单个字符串返回脚本。我需要使用分隔符将文本字段中的脚本拆分回其原始段数组。我计划基于换行符进行拆分，但得到的反馈是我不应该使用它来拆分，而是使用“不可见”分隔符，因为段之间可能没有换行符。

项目限制如下：

  1. 我只能为每个段使用一个文本字段而不是单独的文本字段。
  2. 我不能通过换行符拆分，因为我应该假设组装的脚本在段之间可能没有换行符。
  3. 编辑者不应该能够编辑文本字段中的分隔符，也不能看到它。

我曾尝试在 scriptCompiledSegments 的不同段之间使用“‌&zwnj”，但它会在编辑器编辑脚本时呈现在文本字段中。有人可以提出解决方案吗？如果有必要，我愿意为专门的文本字段使用不同的库。

编辑：

我目前正在研究将片段包装在一个跨度中。看起来确实是在将片段以无缝脚本呈现时保持片段分离。如果有人可以分享他们关于如何使跨度可编辑的建议，那也很棒。

标签： javascriptreactjsmaterial-ui

解决方案

推荐阅读