ReactJS - 在为新行输入数据时，如何将单元格文本包装在 MaterialTable 中？

Posted 2023-02-22

【中文标题】ReactJS - 在为新行输入数据时，如何将单元格文本包装在 MaterialTable 中？

【英文标题】：ReactJS - How could I wrap the cell text in MaterialTable when typing in data for a new row?

【发布时间】：2020-05-09 05:01:30

【问题描述】：

问题：在 MaterialTable 中输入异常长的名称时是否可以换行？

我在使用材料表时遇到的一个问题是，当输入一个很长的名称时，例如“LONG NAME LONG NAME LONG NAME LONG NAME”，该行继续，并且前面的单词“消失”。

有没有办法让文本换行，所以当我输入一个很长的名字时，文本字段会不断扩展？

代码：https://codesandbox.io/s/material-demo-vnk66

当前问题：

我想尝试做什么，文本在框中的位置。

我尝试做的是在 MaterialTable 声明中的内联样式，然后在我拥有的外部元素中，但这不起作用：

style = 
    whiteSpace: "normal", 
    wordWrap: "break-word",

【参考方案1】：

您可以自定义组件，以使它们在可编辑的材料表中完全符合您的要求。例如，如果你想有一个多行 TextField 你可以这样做：

columns: [
  
    title: "Name",
    field: "name",
    editComponent: ( value, onChange ) => (   
      <TextField
        onChange=e => onChange(e.target.value)
        value=value
        multiline
      />
    )
  ,
  ...
] 

演示：https://codesandbox.io/s/material-demo-8ysj5