Question

我正在使用React + Ant.design，我需要创建一个表格，其中每一行都是一个带有多个输入的表单，表示该行的字段，用户可以在每个字段中编辑值并推送保存在每行的末尾。

但是我不知道怎么做，因为Table组件中只有JSON格式的普通数据的数据源属性。

    const dataSource = [
  {
    id: 1,
    name: 'Name 1',
    number: 1,
    username: 'user1',
    date: '09-09-2011',
    status: 'reviewed'
  },
  {
    id: 2,
    name: 'Name 2',
    number: 2,
    username: 'user2',
    date: '01-10-2021',
    status: 'reviewed'
  }
]

<Table
        size="small"
        rowKey="id"
        dataSource={dataSource}  <-- row data here, need to have form with input for each field
        columns={this.columns}
        bordered={false}
        rowClassName={(record, index) => {
          return cssClasses.tableRow
        }}
        title={TableTitle}
      >

是否可以在表格行中包含表单，或者只使用React组件更好？

Answer 1

我不完全理解你的问题

你的意思是来自columns道具的渲染回调吗？

您可以在props中定义以呈现输入：

const column = [
  {
    title: 'input',
    dataIndex: 'value',
    render: (value, row, index) => { return <input /> }  // just an example
  }
]

了解更多信息请查看此示例：

https://ant.design/components/table/#components-table-demo-edit-row

Answer 2

是可能的...

您的数据源应该处于状态

您可以做这样的事情

state = {dataSource: this.dataSource.map(data => {
        return {
          key: data.id,
          item: (
            <Select
              <Option></Option>
            </Select>
          ),
          quantity: <InputNumber/>,
          comments:<TextArea/>,

        };
      })}`

，您可以将this.dataSource替换为this.state.dataSource

<Table
        dataSource={this.state.dataSource} 
/>

是否可以使用Ant.design将表单插入表中的每一行？

2 个答案: