React+antd实现可编辑单元格，非官网写法，不使用可编辑行和form验证

six66667

已于 2023-09-11 14:03:44 修改

阅读量904

点赞数

文章标签：前端 react antd 可编辑单元格

于 2023-09-07 16:55:06 首次发布

本文链接：https://blog.csdn.net/six66667/article/details/132740976

版权

本文介绍了如何在不使用Ant Design的EditableRow和Cell以及Context、高阶组件和form验证的情况下，创建一个可编辑单元格的精简版。通过在column元素的render中使用<EditableCell>，并在props中传递保存修改的方法，可以实现简单的可编辑单元格功能。当单元格失去焦点或按下回车键后，数据将更新。为了防止数据回滚，可以在state中添加一个text字段，并用它替换{children}来显示最新内容。为了代码复用，建议将此组件单独存放在一个文件中，然后在需要的页面中导入。

摘要由CSDN通过智能技术生成

antd3以上的写法乍一看还挺复杂，自己写了个精简版

没用EditableRow+Cell的结构，也不使用Context、高阶组件等，不使用form验证

最终效果：

class EditableCell extends React.Component {
    state = {
        editing: false
    };
    toggleEdit = () => {
        const editing = !this.state.editing
        this.setState({ editing }, () => {
            if (editing) {
                this.input.focus()
            }
        })
    };
    save = e => {
        const { record, handleSave } = this.props;
        this.toggleEdit();
        handleSave(record, e.target.value)

    };  // save主要处理两件事，一是切换editing状态，二是提交更新的数据
    render() {
        const { children } = this.props
        const { editing } = this.state;
        return editing ? (
            <Input defaultValue={children} ref={node=>(this.input=node)} onPressEnter={this.save} onBlur={this.save} />
        ) : (
            <span>{children}<Icon type="edit" theme='twoTone' style={
  {marginLeft: 10}} onCl