ReactJS：使用 react-table 使表格可编辑答案

【问题标题】：ReactJS: Make a table editable using react-tableReactJS：使用 react-table 使表格可编辑
【发布时间】：2017-07-06 11:49:23
【问题描述】：

我正在使用 react-table npm 包 (https://www.npmjs.com/package/react-table) 来生成我的表格：

<ReactTable
    data={ tableData }
    columns={ tableColumns }
    showPagination={ false }
    defaultPageSize={ tableData.length }
/>

表格按预期显示。但现在我想让这个表可编辑。所以我需要使用带有数据值的输入字段，而不仅仅是文本数据值。

我该怎么做？我不明白这一点的文档......所以我需要一些帮助。

【问题讨论】：

如果我理解的话，在 v6 中可用，但在 v7 中不可用，即“无头”

标签： javascript reactjs

【解决方案1】：

首先你需要编辑 Columns 道具

Check render: props => <input value={props.row.name} onChange={onChangeFct} />

例如：

const onChangeFct = () => console.log("onChange usually handled by redux");
const tableColumns = [
{
    header: 'Id',
    accessor: 'id'
},
{
    header: 'Name',
    accessor: 'name',
    render: props => <input value={props.row.name} onChange={onChangeFct} />
}
]


<ReactTable
    data={ tableData }
    columns={ tableColumns }
    showPagination={ false }
    defaultPageSize={ tableData.length }
/>

【讨论】：

【解决方案2】：

您可以使用诸如react-x-editable 插件之类的文本就地编辑插件来使表格可编辑，因为它提供了两种模式：内联和弹出。

【讨论】：