Ant-Design Table可编辑行增加下拉框

Question

问题

ant-design Table中可编辑行实例中，单元格选项默认只支持文本<Input />和数字<InputNum />,这有一个需求，需要单元格中支持下拉框，增加了下拉框模块后，测试的时候提交表单值是空的，求大牛帮忙看下是什么原因？

代码

class EditableCell extends React.Component {
    renderToposNode = (data) => {
        let ret = [];
        ret = data.map(obj => {
            return (<Option key={obj.id.toString()}>{obj.node_name}</Option>)
        })
        return ret;
    }

    getNodenameById = (id, data) => {
        let node = data.filter((obj)=> (
            obj.id == id
        ));
        return node[0].node_name;
    }

    getDeaultTos = (relTos, data) => {
        let ret = relTos.map(obj => {
            return this.getNodenameById(obj, data)
        });
        return ret;
    }
    
    getInput = () => {
        if (this.props.inputType === 'number') {
            return <InputNumber />;
        }
        let handleChange = (value) => {
            console.log(value);
        }
        if (this.props.inputType === 'select') {
            const { record, toposNode } = this.props;
            const defaultValue = this.getDeaultTos(record.rel_tos, toposNode);
            return (
                <div>
                    <Select 
                        mode="multiple"
                        style={{width: 120}}
                        onChange={handleChange}
                    >
                        {this.renderToposNode(toposNode)}
                    </Select>
                </div>
            )
        }
        return <Input />;
    };
        render() {
        const {
            editing,
            dataIndex,
            title,
            inputType,
            record,
            index,
            toposNode,
            ...restProps
        } = this.props;

        let initialValue = "";
        if (editing) {
            initialValue = dataIndex === "rel_tos" ? this.getDeaultTos(record.rel_tos, toposNode) : record[dataIndex];
            // console.error(initialValue);
        }
        return (
            <EditableContext.Consumer>
                {(form) => {
                    const { getFieldDecorator } = form;
                    return (
                        <td {...restProps}>
                            {editing ? (
                                <FormItem style={{ margin: 0 }}>
                                    {getFieldDecorator(dataIndex, {
                                        rules: [{
                                            required: true,
                                            message: `请输入 ${title}!`,
                                        }],
                                        initialValue,
                                    })(this.getInput())}
                                </FormItem>
                            ) : restProps.children}
                        </td>
                    );
                }}
            </EditableContext.Consumer>
        );
    }
}

现象

Answer 1

排查发现，原来是用div wrapper出问题了。写jsx习惯了。