ReactJS - 在为新行输入数据时如何将单元格文本包装在 MaterialTable 中?
ReactJS - How could I wrap the cell text in MaterialTable when typing in data for a new row?
问题:在MaterialTable中输入异常长的名字时是否可以换行?
我在使用 Material Table 时遇到的一个问题是在输入很长的名称时,例如 "LONG NAME LONG NAME LONG NAME LONG NAME" 该行继续,而前面的词 "disappear".
有没有一种方法可以让文本换行,这样当我输入一个很长的名字时,文本字段会不断扩展?
代码:https://codesandbox.io/s/material-demo-vnk66
当前一期:
我想尝试做的事情,文本在方框内换行。
我尝试做的是在 MaterialTable 声明中内联样式,然后在我拥有的外部元素中,但这不起作用:
style = {{
whiteSpace: "normal",
wordWrap: "break-word",
}}
您可以自定义组件,以使它们在可编辑的 material 表格中完全按照您的意愿运行。例如,如果你想要多行 TextField
你可以这样做:
columns: [
{
title: "Name",
field: "name",
editComponent: ({ value, onChange }) => (
<TextField
onChange={e => onChange(e.target.value)}
value={value}
multiline
/>
)
},
...
]
问题:在MaterialTable中输入异常长的名字时是否可以换行?
我在使用 Material Table 时遇到的一个问题是在输入很长的名称时,例如 "LONG NAME LONG NAME LONG NAME LONG NAME" 该行继续,而前面的词 "disappear".
有没有一种方法可以让文本换行,这样当我输入一个很长的名字时,文本字段会不断扩展?
代码:https://codesandbox.io/s/material-demo-vnk66
当前一期:
我想尝试做的事情,文本在方框内换行。
我尝试做的是在 MaterialTable 声明中内联样式,然后在我拥有的外部元素中,但这不起作用:
style = {{
whiteSpace: "normal",
wordWrap: "break-word",
}}
您可以自定义组件,以使它们在可编辑的 material 表格中完全按照您的意愿运行。例如,如果你想要多行 TextField
你可以这样做:
columns: [
{
title: "Name",
field: "name",
editComponent: ({ value, onChange }) => (
<TextField
onChange={e => onChange(e.target.value)}
value={value}
multiline
/>
)
},
...
]