实现React Table表单行内元素编辑

最新推荐文章于 2025-05-04 13:42:47 发布

CK_Wang_Sir

最新推荐文章于 2025-05-04 13:42:47 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

原文链接：https://ant.design/components/table-cn/

实现React Table表单行内元素编辑-----个人遇到担心忘记部分记录

主要思路：1.React 中Context React.createContext API实现表单内覆盖默认的 table 元素。就是将原有的tb内容编程select元素。
2.使用Antd Table中 components 引用新的Table元素进行覆盖。

重点理清：Context
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。
个人理解：

const MyContext = React.createContext(defaultValue);
<MyContext.Provider value={/* 某个值 */}>

只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效（官网原话）
这个部分中 Provider 就是对context进行“赋值” 将value中的值存放在context中
当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

这里我的理解就是consumer是基于context进行使用内部的参数

官网有很好的的例子
具体可以去React官网进行查看

接下来我写的效果具体参考Antd进行修改大体没咋变：

const EditableContext = React.createContext();   // 创建一个Context 默认值为空

class EditableCell extends React.Component {
    getInput = (operator) => {
        if (this.props.inputType === 'select1') {
            return <Select style={{ width: '160px' }}>
                <Option value="aa" title="aa" >aa</Option>
                <Option value="bb" title="bb">bb</Option>
            </Select>
        }
    };
    renderCell = ({ getFieldDecorator }) => {
        const {
            editing,
            dataIndex,
            title,
            inputType,
            record,
            index,
            children,
            ...restProps
        } = this.props;
        console.log('editing: ',editing);

        return (
            <td {...restProps}>
                {editing ? (
                    <Form.Item style={{ margin: 0 }}>
                        {getFieldDecorator(dataIndex, {
                            rules: [
                                {
                                    required: true,
                                    message: `请选择内容 ${title}!`
                                }
                            ],
                            initialValue: record[dataIndex]
                        })(this.getInput())}
                    </Form.Item>
                ) : (
                        children
                    )}
            </td>
        );
    };

    render() {
        return (
            <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
        );
    }
}

该部分属于主体。

    render() {
        const { dataSource, dataLength } = this.state;
        const components = {
            body: {
                cell: EditableCell    // 引入子组件
            }
        };
        const columns = this.columns.map(col => {
            if (!col.editable) {
                return col;
            }
            return {
                ...col,
                onCell: record => ({
                    record,
                    inputType: col.dataIndex === "faultPh" ? "select1" : "text",
                    dataIndex: col.dataIndex,
                    title: col.title,
                    editing: this.isEditing(record)   // 判断编辑哪一行
                })
            };
        });

        console.log("this.props.form: ",this.props.form);
        
        return (
            <div className="wydetail">
                <EditableContext.Provider value={this.props.form}>
                    <div style={{margin:'10px',border:'2px solid #000066'}}>
                        <Table
                            components={components}    //覆盖默认的Table元素
                            bordered
                            dataSource={dataSource}
                            columns={columns.map(item => ({ ...item, ellipsis: true }))}
                            // size='small'
                            // pagination={{
                            //     total: dataLength,
                            //     itemRender: this.itemRender,
                            //     showSizeChanger: true,
                            //     showQuickJumper: true,
                            //     onChange: this.cancel,
                            //     showTotal: (total, range) => `共  ${total} 条`,
                            // }}
                        />
                    </div>
                </EditableContext.Provider>
            </div>
        )
    }