React 中的 TextField 内无法识别新行 '\n'

2024-02-18

Context

我正在使用 Material UI TextField 并映射从数据库 (MongoDB) 获取的对象数组。就像是:

{state.map((item) => (
         <TextField
          name="description"
          multiline
          required
          type="text"
          value={item.description}
          onChange={handleChange}
        />)
      )
}

Where state是从数据库中取出的数组。

Problem

The item.description按原样显示\n转义序列而不是将行分成新行。

Examples

附加信息

  • 当我尝试做的时候console.log(item.description.split('\n'))在我的 React 代码中,我在控制台中得到以下输出 -

就好像JS根本不认识一样\n!!但在同一个地方,当我运行控制台时,我得到了这个 -

提前致谢!
如果需要其他任何信息来更好地理解问题,请告诉我


显然我通过使用替换和正则表达式全局搜索创建一个辅助函数解决了这个问题

const parseLines = (value) => value.replace(/(\\n)/g, "\n");

我意识到我必须使用\\n代替\n检测字符串模式\n并将其替换为换行符,这很简单\n.

然后在 TextField 中

<TextField               
 name="description"              
 multiline
 required
 type="text"
 value={parseLines(item.description)}
 onChange={handleChange}
/>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React 中的 TextField 内无法识别新行 '\n' 的相关文章

随机推荐