Question

在我的项目中，当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？

Answer 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>
                );
            }];

这将覆盖折扣字段，以占总字段的百分比。

反应物料表rowData未定义

1 个答案: