javascript - ReactJS:使用 react-table 使表格可编辑

Question

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

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

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

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

Answer 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 }
/>