[英]How to edit multiple fields in single column material-table
I'm using material-table for a project.我正在为一个项目使用材料表。 There I have a scenario I need to render and edit multiple fields in a single column conditionally.
我有一个场景,我需要有条件地在单个列中呈现和编辑多个字段。
This is the scenario这是场景
{
title: intl.formatMessage({ ...commonMessages.rate }),
field: 'fixed',
render: rowData => {
if (rowData.config === 'A') {
if (rowData.type !== 'B') {
return (
<Fragment>
<Typography variant="body1">
Pips : {rowData.pips}
</Typography>
<Typography variant="body1">
Percentage : {rowData.percentage}
</Typography>
</Fragment>
);
}
return (
<Typography variant="body1">
{rowData.percentage}
</Typography>
);
}
return (
<Typography variant="body1">{rowData.fixed}</Typography>
);
},
editComponent: props => {
if (props.rowData.type === 'A') {
if (props.rowData.type !== 'B') {
return (
<Fragment>
<Grid item xs={12} sm={12} md={12} lg={6}>
<TextField
id="pips"
onChange={e => props.onChange(e.target.value)}
value={props.rowData.pips}
/>
</Grid>
<Grid item xs={12} sm={12} md={12} lg={6}>
<TextField
id="percentage"
onChange={e => props.onChange(e.target.value)}
value={props.rowData.percentage}
/>
</Grid>
</Fragment>
);
}
return (
<TextField
id="fixed"
onChange={e => props.onChange(e.target.value)}
value={props.rowData.fixed}
/>
);
}
Here the render and edit components display properly.此处渲染和编辑组件正确显示。 But since the field is
'fixed'
the values for pips and percentage are not changing since the onChange applies to fixed
even though any other one in a column changed.但是由于该字段是
'fixed'
,因此点数和百分比的值不会改变,因为 onChange 适用于fixed
,即使列中的任何其他值发生了变化。
How can I get this fixed?我怎样才能解决这个问题? Any help would be appreciated.
任何帮助,将不胜感激。 Thanks
谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.