如何使用 Ant Design 表添加空白可编辑行？答案

【问题标题】：How can I add a blank editable row with Ant Design table?如何使用 Ant Design 表添加空白可编辑行？
【发布时间】：2019-10-01 02:26:24
【问题描述】：

尝试创建一个“添加行”按钮，从而将新的可填充/可编辑行添加到表中。问题是，当我将可编辑字段设为空字符串时，编辑字段不会显示，因此用户无法更改其内容：

// RESULTS IN NO FIELD DISPLAYED
const newCategoryRow = {
    key: 'NEW',
    acct: '',
    description: '',
    total: 0
}

// RESULTS IN FIELD DISPLAYED
const newCategoryRow = {
    key: 'NEW',
    acct: 'blah',
    description: 'blah',
    total: 0
}

有什么办法吗？

【问题讨论】：

标签： reactjs antd

【解决方案1】：

用“-”替换空字符串。

或者给可编辑单元格一个初始值：

    const getInput = (props) => {
        if (props.inputType === 'number')
            return (
                <Input
                    type={'number'}
                    style={{ margin: 0, padding: 4, fontSize: 13 }}
                />);
        //Default field
        else
            return (
                <Input
                    type={'text'}
                    style={{ margin: 0, padding: 5 }}
                />);
    }

            <Form.Item style={{ margin: 0 }}>
                {props.form.getFieldDecorator(dataIndex, 
                    { initialValue: "-", })(getInput(props))}
            </Form.Item>

【讨论】：