一个编辑按钮控制整个table的编辑状态

Question

问题描述：需要用一个编辑按钮控制整个table的编辑状态

技术栈：react+antd

编辑前

编辑后

想问一下大家这种有什么好的实现办法 我不知道该怎么获取到所有行的值 行数是固定的

Answer 1

```jsx
import { Table, Button } from 'antd';

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号'
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号'
  }
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: '操作',
    dataIndex: '',
    key: 'x',
    render: () => <Button type="primary">编辑</Button>
  }
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editable: false
    };
  }
  
  handleEdit = () => {
    this.setState({
      editable: true
    });
  };

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.handleEdit}>编辑</Button>
        <Table
          dataSource={dataSource}
          columns={columns}
          pagination={false}
          bordered
          editable={this.state.editable}
        />
      </div>
    );
  }
}

export default App;

```
不知道对你有没有用，我问的chatgpt