React Material Table rowData 未定义答案

【问题标题】：React Material Table rowData is undefinedReact Material Table rowData 未定义
【发布时间】：2020-03-16 10:24:35
【问题描述】：

在我的项目中，当 onChange 在行中输入值时，我需要在材料表道具中获取 props.rowData 但我将 rowData 设置为未定义。我该如何解决这个问题。

 "material-table": "1.36.6",
 "react": "16.8.3",
 "react-dom": "16.8.3",



 const columns = [{
                title:  <Translate id='discount' />,
                field: 'discount',
                editComponent:props => {
                    return(
                        <Translate>
                            {({ translate }) =>
                                <TextField
                                    className='min-w-80'
                                    type={'text'}
                                    placeholder={translate('discount')}
                                    margin="dense"
                                    value={props.value === props ? '' : props.value}
                                    onChange={event => {
                                        props.onChange(event.target.value)
                                    }}
                                />
                            }
                        </Translate>
                    );
                },
            },
            {
                title: <Translate id='total_price' />,
                field: 'total_price',
                editComponent: props => {
                    return(
                        <Translate>
                            {({ translate }) =>
                                <TextField
                                    className='min-w-80'
                                    type={'text'}
                                    placeholder={translate('total_price')}
                                    margin="dense"
                                    value={props.value === props ? '' : props.value}
                                    onChange={event => {
                                        props.onChange(event.target.value)
                                    }}
                                />
                            }
                        </Translate>
                    );
                }];

当折扣输入发生变化时，我如何获取 props.rowData ？

【问题讨论】：

Props.rowData 应该被填充。它一定是别的东西。你能为我们在沙盒中重现它吗？
你可以在这里查看@Domino987 codesandbox.io/s/thirsty-panini-wk00h
当然，如果您添加一个新对象，它将是未定义的，因为您正在创建一个新对象。如果您添加数据并对其进行编辑，您将获得 rowData。
当我更改折扣时，我想获取其他列值并减去 service_price - discount，然后将结果写入其他列。 @Domino987

标签： javascript reactjs es6-modules material-table

【解决方案1】：

你可以这样做：

const columns = [{
            title:  <Translate id='discount' />,
            field: 'discount',
            editComponent:props => {
                const discount = props.rowData ? props.rowData.total_price / 20 : ""
                return(
                    <Translate>
                        {({ translate }) =>
                            <TextField
                                className='min-w-80'
                                type={'text'}
                                placeholder={translate('discount')}
                                margin="dense"
                                value={discount}
                                onChange={event => {
                                    props.onChange(event.target.value)
                                }}
                            />
                        }
                    </Translate>
                );
            },
        },
        {
            title: <Translate id='total_price' />,
            field: 'total_price',
            editComponent: props => {
                return(
                    <Translate>
                        {({ translate }) =>
                            <TextField
                                className='min-w-80'
                                type={'text'}
                                placeholder={translate('total_price')}
                                margin="dense"
                                value={props.value === props ? '' : props.value}
                                onChange={event => {
                                    props.onChange(event.target.value)
                                }}
                            />
                        }
                    </Translate>
                );
            }];

这会将折扣字段覆盖为总字段的百分比。

【讨论】：

谢谢@Domino987 我更新了上一版本的材料表，然后用 onRowChanged 函数解决了这个问题。