如何在React-table中单击时创建多个可编辑单元格

Question

我有一个包含4列的表：名字，姓氏，城市，地址。如果用户点击城市，城市和地址变为可编辑。

class Home extends React.PureComponent {
    constructor(props){
        super(props);

        this.state = {

            columns : [
                {
                    Header: 'First Name',
                    accessor: 'firstName'
                },
                {
                    Header: 'Last Name',
                    accessor: 'lastName'
                },

                {
                    Header: 'City',
                    accessor: 'city',
                    Cell: this.clickableCell
                },
                {
                    Header: 'Address',
                    accessor: 'addr'
                }

            ],

            data: [ 
                {
                    firstName: "MyName",
                    lastName: "MyLastName",
                    city: "MyCity",
                    addr: "My Address"
                }
           ],

        };

    }

    renderEditable = (cellInfo) => {

        const products = this.state.data;
        const row = products[cellInfo.index];
        const value = row[cellInfo.column.id]

        return (
            <div contentEditable suppressContentEditableWarning>
                {value}
            </div>
        )
    };

    clickableCell = (cellInfo) => {

        const products = this.state.data;
        const row = products[cellInfo.index];
        const value = row[cellInfo.column.id]

        const onClick = () => {
            let c = Object.assign({}, this.state);

            // Change the City and Address Cell's function to create an 
            // editable cell
            c.columns[2]['Cell'] = this.renderEditable;
            c.columns[3]['Cell'] = this.renderEditable;

            this.setState({...c});
            this.forceUpdate();
        }

        return (
            <div onClick={onClick}>
                {value}
            </div>
        )
    };
    render() {
        return(
            <ReactTable
                className="-striped -highlight"
                data={this.state.data}
                columns={this.state.columns} 
            />
        )
    }
}

我的想法是将City＆Cell的一个函数绑定到一个函数来创建一个可点击的div，并用一个不同的函数替换Cell函数来渲染一个可编辑的div ..但是这个想法并没有工作...