react + antdesign入门(二) 编辑表格数据,将数据回显到表单内

运行结果:

表格组件 TableList.js

import { Table, Space, Button } from "antd";
import { Component } from "react";
 
 
const tableList = [
    {
        key: "1",
        name: "胡彦斌",
        age: 32,
        sex: "0",
        address: "西湖区湖底公园1号",
        like: ["唱歌", "跳舞"]
    },
    {
        key: "2",
        name: "胡彦祖",
        age: 42,
        sex: "0",
        address: "西湖区湖底公园1号",
        like: ["跳舞"]
    }
];
 
export default class TableList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false, // 控制弹窗的显隐
            editData: {} // 弹窗的数据
        };
    }
    getColumns() {
        let self = this;
        return [
            {
                title: "姓名",
                dataIndex: "name",
                key: "name"
            },
            {
                title: "年龄",
                dataIndex: "age",
                key: "age"
            },
            {
                title: "住址",
                dataIndex: "address",
                key: "address"
            },
            //  操作列
            {
                title: "Action",
                key: "action",
                render: (text, record) => (
                    <Space size="middle">
                        <Button
                            type="primary"
                            onClick={() => {
                                self.edit(record);
                            }}>
                            编辑
                        </Button>
                        <Button
                            type="danger"
                            onClick={() => {
                                self.delete(record.key);
                            }}>
                            删除
                        </Button>
                    </Space>
                )
            }
        ];
    }
    // 编辑
    edit(data) {
        console.log("编辑", data);
        this.setState({
            visible: true,
            editData: data
        });
    }
    // 删除
    delete() {
        console.log("删除");
    }
    render() {
        return (
            <>
                <Table dataSource={tableList} columns={this.getColumns()} />
            </>
        );
    }
}

弹窗组件 EditModel.js;

import { Component } from "react";
import React from "react";
import { Form, Input, Checkbox, Radio, Modal } from "antd";

const CheckboxGroup = Checkbox.Group;

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 }
};
// checkbox
const likeOptions = ["唱歌", "跳舞", "画画"];

// radio
const radioList = [
    { label: "男", value: "0" },
    { label: "女", value: "1" }
];

class ModelForm extends Component {
    constructor(props) {
        super(props);
        this.formRef = React.createRef();
    }
    componentDidMount() {
        this.formRef.current.setFieldsValue(this.props.data);
    }
    componentDidUpdate() {
        this.formRef.current.setFieldsValue(this.props.data);
    }

    render() {
        return (
            <Form
                {...layout}
                name="basic"
                ref={this.formRef}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}>
                <Form.Item
                    label="姓名"
                    name="name"
                    rules={[
                        {
                            required: true,
                            message: "Please input your username!"
                        }
                    ]}>
                    <Input />
                </Form.Item>
                <Form.Item label="性别" name="sex">
                    <Radio.Group
                        options={radioList}
                        onChange={changeRadio}></Radio.Group>
                </Form.Item>
                <Form.Item label="地址" name="address">
                    <Input.TextArea />
                </Form.Item>
                <Form.Item label="爱好" name="like">
                    <CheckboxGroup options={likeOptions} />
                </Form.Item>
            </Form>
        );
    }
}

export default class EditModel extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Modal
                title="Basic Modal"
                visible={this.props.visible}
                onOk={this.props.clickOk}
                onCancel={this.props.clickCancel}
                cancelText="取消"
                okText="确定">
                <ModelForm
                    data={this.props.data}
                />
            </Modal>
        );
    }
}

动态设置 ant-design 的表单数据的两种方法:

1. 在 constructor 中 使用 React.createRef() 定义 节点变量

constructor(props) {
        super(props);
        this.formRef = React.createRef();
    }
    

然后在组件生命周期里面对表单数据赋值,具体参数可参照 ant design

 componentDidMount() {
        this.formRef.current.setFieldsValue(this.props.data);
    }
    componentDidUpdate() {
        this.formRef.current.setFieldsValue(this.props.data);
    }

2. 在组件上面设置 ref 属性

组件的属性设置

<Form
     {...layout}
      name="basic"
      ref={(form) => (this.formV = form)}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}>
     //  ...
      </Form>

组件的生命周期中设置

componentDidMount() {
        this.formV.current.setFieldsValue(this.props.data);
    }
    componentDidUpdate() {
        this.formV.current.setFieldsValue(this.props.data);
    }