如何在DevExtreme React Grid的单元格内添加按钮？

Question

我正在使用Def Extreme网格，并且希望每行都有一个按钮，以便可以更改一行的数据。在buttonClick的示例中，我想将汽车品牌重置为空字符串。因为带有按钮的自定义单元格是在带有网格的类之外定义的，所以我不知道如何访问状态。

编码笔

const Cell = props => {
  if (props.column.name === "city") {
    return (
      <td>
        <button>Reset car brand</button>
      </td>
    );
  }

  return <Table.Cell {...props} />;
};

Answer 1

我目前正在使用DevExtreme的React网格，遇到了类似的问题，但是采用了不同的解决方案。我所做的是创建一个新的插件，以添加一个名为“ ActionsColumn”的新列。您可以将节点和关联的回调都传递给插件。最低代码应如下所示（抱歉，未经测试）：

import React from 'react'
import PropTypes from 'prop-types'
import IconButton from '@material-ui/core/IconButton'
import { TABLE_HEADING_TYPE } from '@devexpress/dx-grid-core'
import {Getter, Template, Plugin} from '@devexpress/dx-react-core'
import {
    Table,
} from '@devexpress/dx-react-grid-material-ui'

const pluginDependencies = [
    {name: 'Table'},
];

const ACTIONS_COLUMN_TYPE = 'actionsColumnType';

function tableColumnsWithActions(tableColumns, width) {
    return [...tableColumns, {key: ACTIONS_COLUMN_TYPE, type: ACTIONS_COLUMN_TYPE, width: width}];
}

function isHeadingActionsTableCell(tableRow, tableColumn) {
    return tableRow.type === TABLE_HEADING_TYPE && tableColumn.type === ACTIONS_COLUMN_TYPE;
}

function isActionsTableCell(tableRow, tableColumn) {
    return tableRow.type !== TABLE_HEADING_TYPE && tableColumn.type === ACTIONS_COLUMN_TYPE;
}

export class ActionsColumn extends React.PureComponent {
    render() {
        const {
            actions,
            width,
        } = this.props;
        const tableColumnsComputed = ({tableColumns}) => tableColumnsWithActions(tableColumns, width);

        return (
            <Plugin
                name="ActionsColumn"
                dependencies={pluginDependencies}
            >
                <Getter name="tableColumns" computed={tableColumnsComputed}/>

                <Template
                    name="tableCell"
                    predicate={({tableRow, tableColumn}) =>
                    isHeadingActionsTableCell(tableRow, tableColumn)}
                >
                    <Table.Cell>Actions Column</Table.Cell>
                </Template>
                <Template
                    name="tableCell"
                    predicate={({tableRow, tableColumn}) => isActionsTableCell(tableRow, tableColumn)}
                >
                    {params => (
                        <Table.Cell {...params} row={params.tableRow.row}>
                            {actions.map(action => {
                                const id = params.tableRow.row.id;
                                return (
                                    <IconButton onClick={() => action.action(id)}>
                                        {action.icon}
                                    </IconButton>
                                )

                            })}
                       </Table.Cell>
                    )}
                </Template>
            </Plugin>
        );
    }
}
ActionsColumn.propTypes = {
    actions: PropTypes.arrayOf(PropTypes.PropTypes.shape({
        icon: PropTypes.node,
        action: PropTypes.func.isRequired
    })).isRequired,
    width: PropTypes.number
};
ActionsColumn.defaultProps = {
    width: 240,
};

您只需检查您是在标题行还是常规表行中，然后仅添加标题或分别定义的操作即可。

为了使用此插件，只需在Table插件声明之后将其包括在Grid定义中：

render() {
    const {columns, rows} = this.state;
    const actions = [
        {
            icon: <DeleteIcon/>,
            action: doAlert
        },
        {
            icon: <EditIcon/>,
            action: id => alert('edit id: ' + id)
        }
    ];

    return (
        <Grid rows={rows} columns={columns} getRowId={getRowId}>
            <Table/>
            <TableHeaderRow/>
            <ActionsColumn actions={actions}/>
        </Grid>
    )
}

我提出此解决方案的方法非常简单：

1. 阅读Oliver Sturm的“ DevExtreme React Grid-博客系列 ”
2. 阅读React Core文档。
3. 在GitHub上检查现有的table-edit-column源代码：此处和此处

希望这可以帮助。

Answer 2

我已经分叉了您的沙箱代码并对其进行了一些添加。希望这就是你要找的。下面是相同的代码。希望这可以帮助。

import React from "react";
import { render } from "react-dom";
import Paper from "@material-ui/core/Paper";
import // State or Local Processing Plugins
"@devexpress/dx-react-grid";
import {
    Grid,
    Table,
    TableHeaderRow
} from "@devexpress/dx-react-grid-material-ui";

class App extends React.PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            columns: [
                { name: "name", title: "Name" },
                { name: "sex", title: "Sex" },
                { name: "city", title: "City" },
                { name: "car", title: "Car" },
                { name: "action", title: "action" }
            ],
            rows: [
                {
                    sex: "Female",
                    name: "Sandra",
                    city: "Las Vegas",
                    car: "Audi A4",
                    action: this.addResetBtn.call(this, { index: 0 })
                },
                { sex: "Male", name: "Paul", city: "Paris", car: "Nissan Altima" },
                { sex: "Male", name: "Mark", city: "Paris", car: "Honda Accord" },
                { sex: "Male", name: "Paul", city: "Paris", car: "Nissan Altima" },
                { sex: "Female", name: "Linda", city: "Austin", car: "Toyota Corolla" },
                {
                    sex: "Male",
                    name: "Robert",
                    city: "Las Vegas",
                    car: "Chevrolet Cruze",
                    action: this.addResetBtn.call(this, { index: 5 })
                },
                { sex: "Female", name: "Lisa", city: "London", car: "BMW 750" },
                { sex: "Male", name: "Mark", city: "Chicago", car: "Toyota Corolla" },
                {
                    sex: "Male",
                    name: "Thomas",
                    city: "Rio de Janeiro",
                    car: "Honda Accord"
                },
                { sex: "Male", name: "Robert", city: "Las Vegas", car: "Honda Civic" },
                { sex: "Female", name: "Betty", city: "Paris", car: "Honda Civic" },
                {
                    sex: "Male",
                    name: "Robert",
                    city: "Los Angeles",
                    car: "Honda Accord"
                },
                {
                    sex: "Male",
                    name: "William",
                    city: "Los Angeles",
                    car: "Honda Civic"
                },
                { sex: "Male", name: "Mark", city: "Austin", car: "Nissan Altima" }
            ]
        };
    }

    addResetBtn = ({ index }) => {
        return (
            <button
                className="btn"
                onClick={this.handleResetClick.bind(this, { index: index })}
            >
                Reset
            </button>
        );
    };

    handleResetClick = ({ index }) => {
        const updatedRows = [...this.state.rows];
        updatedRows[index].car = "";
        this.setState({ rows: updatedRows });
    };

    render() {
        const { rows, columns } = this.state;

        return (
            <Paper>
                <Grid rows={rows} columns={columns}>
                    <Table />
                    <TableHeaderRow />
                </Grid>
            </Paper>
        );
    }
}

render(<App />, document.getElementById("root"));