Javascript 将React MUI textfield中的值拆分为字符串数组

我目前正在使用React with Material UI为一个项目创建一个网页，允许编辑编辑书面脚本。如果这是一个基本的问题，我会提前道歉，因为我还没有反应过来

该页面由一个文本字段组成，如下所示：[1]：

我首先将查询中的段（字符串[]）组合到文本字段中，如下所示：

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) })
            }}
          />

然后，我显示编译后的脚本，如下所示：

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) })
            }}
          />

{
setEditedScripts（{updatedSegments:（event.target.value）}）
}}
/>

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

该项目受到以下限制：

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) })
            }}
          />

我只能使用一个文本字段，而不是为每个段使用单独的文本字段

我不能通过新行拆分，因为我应该假设组装的脚本在段之间可能没有新行

编辑器不能编辑文本字段中的分隔符，也不能查看它

我试过使用“‌&zwnj“在scriptCompiledSegments中的不同段之间，但它将在编辑器编辑脚本时在文本字段中呈现。有人能提出解决办法吗？如果有必要，我愿意为一个专门的文本字段使用不同的库

编辑：

---

我目前正在研究在跨度中包装线段。它看起来确实像是在以无缝的脚本呈现片段的同时将片段分开。如果有人能分享他们关于如何使跨度可编辑的建议，那也太好了。

为什么不使用

\n

？如果您尝试在常规的

textarea

中换行并获取其

值，您将看到
\n
的内部。您好，我认为这实际上可以工作，但我已经取消了textfield，为每个段做了一个跨度。仍然感谢您的推荐。为什么不使用
\n
？如果您尝试在常规的
textarea
中换行并获取其
值，您将看到
\n
的内部。您好，我认为这实际上可以工作，但我已经取消了textfield，为每个段做了一个跨度。还是谢谢你的推荐。