antd3以上的寫(xiě)法乍一看還挺復(fù)雜，自己寫(xiě)了個(gè)精簡(jiǎn)版

沒(méi)用EditableRow+Cell的結(jié)構(gòu)，也不使用Context、高階組件等，不使用form驗(yàn)證

最終效果：

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狀態(tài)，二是提交更新的數(shù)據(jù)
    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}} onClick={this.toggleEdit} /></span>
            )
    }
};

最后使用的時(shí)候直接在column元素的render里面<EditableCell> </EditableCell>就好啦， props一定要傳處理保存修改的方法

render: (text, record) => {
    return (<EditableCell handleSave={handleModifyNote} record={record}>{text}</EditableCell>) //記得傳props
    }

現(xiàn)在這個(gè)可編輯單元格組件在鼠標(biāo)失焦或者回車(chē)后，列數(shù)據(jù)會(huì)變回修改前的數(shù)據(jù)，在state里面加個(gè)text，把最后顯示的 {children} 換成 {text} 就可以。

該組件也許很多頁(yè)面都會(huì)使用，單獨(dú)放在一個(gè)文件里再引入會(huì)優(yōu)雅很多：

import React from 'react';
import {Input, Icon} from 'antd';

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

    };
    render() {
        const { editing, text } = this.state;
        return editing ? (
            <Input defaultValue={text} ref={node=>(this.input=node)} onPressEnter={this.save} onBlur={this.save} />
        ) : (
            <span>{text}<Icon type="edit" theme='twoTone' style={{marginLeft: 10}} onClick={this.toggleEdit} /></span>
            )
    }
};

export default EditableCell;

引入的時(shí)候：

import { EditableCell } from '../EditableCell'

全部頁(yè)面index.jsx大概是這樣的文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-698533.html

import React, { useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Input, Select, Row, message, Col, Table, Button, Icon, Upload, Form, DatePicker } from 'antd';
import { connect } from 'dva';
import download from '@/utils/download';
import styles from './style.less';

const { Option } = Select;

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)

    };
    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}} onClick={this.toggleEdit} /></span>
            )
    }
};

const Aabbb = props => {
    const { form, dispatch, dataLoading } = props;
    const { getFieldDecorator } = form;
    const { pageInfo, res }  = props;
    const formItemLayout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const columns = [
        { title: '序號(hào)', dataIndex: 'id', align: 'center', width: 80, fixed: 'left', render: (text, record, index) =>
            (<span>{(pageInfo.current - 1) * pageInfo.pageSize + index + 1}</span>)
        },
        ...
        { title: '結(jié)果', dataIndex: 'results', align: 'center', render: (text, record) => (
            <Select defaultValue={text} className={styles.tableSelection} onChange={value => handleModifyResult(value, record)}>
                <Option value="正常">正常</Option>
                <Option value="異常">異常</Option>
            </Select>
        )},
        { title: '備注', dataIndex: 'notes', align: 'center', width: 120, render: (text, record) => {
            return (<EditableCell handleSave={handleModifyNote} record={record}>{text}</EditableCell>)
        }}
    ];
    const handleModifyNote = (record, value) => {
        console.log('save', {...record, notes: value})
        dispatch({})
    };
    const handleModifyResult = (value, record) => {
        dispatch({})
        console.log({...record, inspectionResults: value});
    };
    
    
    useEffect(() => {
        
    }, []);
    const queryData = () => {}
        
    return (
        <PageHeaderWrapper>
            <Card>
                <Form horizontal="true">
                    <Row>
                        <Col span={8}>
                            ...
                        </Col>   
                    </Row>
                    <Row>
                        ...
                    </Row>
                </Form>
                <Table
                    columns={columns}
                    loading={dataLoading}
                    dataSource={res}
                    rowKey={(record,index)=>index}
                    pagination={}
                    onChange={}
                    />
            </Card>
        </PageHeaderWrapper>
    );
}

export default connect(({ aabbb, loading }) => ({
    res: aabbb.res,
    dataLoading: loading.effects['aabbb/QueryAabbb'],
}))(Form.create()(Aabbb));

到了這里，關(guān)于React Antd可編輯單元格，非官網(wǎng)寫(xiě)法，不使用可編輯行和form驗(yàn)證的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！