在 Ant 设计中使用输入 Table

Question

在我的应用程序中，我使用 Ant design Table 我的代码如下所示：

<Table size="small" dataSource={this.props.actionArray}>
            <Column title="Name" dataIndex="id" key="name"/>
            <Column title="Action" key="action"
            render={(text,record)=>(
                <span>
                    <a href="" >Edit</a>
                    <span className="ant-divider"/>
                    <a href="" >Delete</a>
                </span>
            )}
            />

        </Table>

我希望当用户单击 Edit 时，table 的整行呈现为 <Input type="text"/> 而不是普通文本，以便用户可以编辑行数据，也可以自定义保存按钮当用户点击它时调用一个函数（例如 save() ）但我不知道该怎么做。

Answer 1

尝试这样的事情。保存状态下的编辑记录id，根据那个显示或隐藏输入：

columns = [
  {
    title: 'Name',
    render: (text, record) =>
      record.id === this.state.editingId ? (
        <Input type="text"/>
      ) : (
        text
      ),
  },
  {
    title: "Action",
    render: (text, record) => (
      <span>
        <a href="" >Edit</a>
        <span className="ant-divider"/>
        <a href="" >Delete</a>
      </span>
    )}
  }
]

在 Ant 设计中使用输入 Table

Using Inputs in Ant design Table

reactjs

antd