在这种情况下如何编写 onChange 函数？

Question

我有一个名为 Timesheet.js 的功能组件。它看起来像这样：

在这个 Timesheet.js 中，我的数据如下所示。嵌套的“天”是此处可编辑表的数据。

const data = {
        "id": {
            "timestamp": 1613185134,
            "date": "2021-02-13T02:58:54.000+00:00"
        },
        "employeeId": 1,
        "days": [
            {
                "date": "02/07/2021",
                "day": "sunday",
                "start_time": "00:00",
                "end_time": "00:00",
                "total_hours": 8,
                "absent": ""
            },
            {
                "date": "02/08/2021",
                "day": "monday",
                "start_time": "00:00",
                "end_time": "00:00",
                "total_hours": 8,
                "absent": "floating"
            },
            {
                "date": "02/09/2021",
                "day": "tuesday",
                "start_time": "00:00",
                "end_time": "00:00",
                "total_hours": 8,
                "absent": ""
            },
            {
                "date": "02/10/2021",
                "day": "wednesday",
                "start_time": "00:00",
                "end_time": "00:00",
                "total_hours": 8,
                "absent": ""
            },
            {
                "date": "02/11/2021",
                "day": "thursday",
                "start_time": "00:00",
                "end_time": "00:00",
                "total_hours": 8,
                "absent": ""
            },
            {
                "date": "02/12/2021",
                "day": "friday",
                "start_time": "00:00",
                "end_time": "00:00",
                "total_hours": 8,
                "absent": "holiday"
            },
            {
                "date": "02/13/2021",
                "day": "saturday",
                "start_time": "00:00",
                "end_time": "00:00",
                "total_hours": 8,
                "absent": ""
            }
        ],
        "totalBillingHours": 24,
        "totalCompensatedHours": 40,
        "comment": "1 floating day and 1 holiday",
        "submissionStatus": "Not Started",
        "timesheetFile": ""
    };

我想要的函数是当我更改此表中的值时，例如此处的“开始时间”，它会调用 onChange 函数并更新我的数据。但它不起作用。谁能告诉我如何修复它？谢谢！！！

我的代码如下：

import { useEffect, useState } from "react";
import moment  from "moment"
import {Button, Space} from 'antd';
import { Row, Col, Input, Table, TimePicker, Checkbox, Select} from 'antd';


const Option = Select.Option;


function Timesheet(props) {
    const data = {...my data like above...};

    const [days, setDays] = useState(data.days);

    const columns =  [
        {
            title: 'Day',
            dataIndex: 'day',
            key: 'day',

        },
        {
            title: 'Date',
            dataIndex: 'date',
            key: 'date',

        },
        {
            title: 'Starting Time',
            dataIndex: 'startTime',
            key: 'start_time',
            render: (text, recode) => <TimePicker value = {moment(recode.start_time, 'HH:mm')}
                                                  format="HH:mm"
                                                  onChange ={(e, text) => {
                // 1. compare whether this item is changed or not, if it is changed, set the new value
                if (text != "") {
                    recode.start_time = text
                } else {
                    recode.start_time = "00:00"
                }

                // 2. Call setDays here, and loop every items in days to update its value
                setDays({days : days.map((item) => {
                        if(item.date == recode.date) {
                            return recode;
                        } else {
                            return item;
                        }
                    })})
            }}/>,

        },

       ...Other columns...

    ]


    return (
        <div>

            <br/>
            <Row>
                <Col span={8} >
                    Week Ending : <Input disabled bordered={false} value = {data.days[0]['date']} />
                </Col>

                <Col span={8}>
                    totalBillingHours : <Input disabled bordered={false} value = {data.totalBillingHours} />
                </Col>

                <Col span={8} >
                    totalCompensatedHours : <Input disabled bordered={false} value = {data.totalCompensatedHours} />
                </Col>
            </Row>
            <br/>
            <Table rowKey="date" pagination={false} dataSource={data.days} columns={columns}/>

            <br/>
            <br/>
            <Row>
                <Col span={19}></Col>
                <Col span={4}>
                    <Button style={{ width: 160 }} size={"large"} type="primary">Save</Button>
                </Col>
            </Row>


        </div>
    );
}

export default Timesheet;

Answer 1

您必须在状态中添加数据并在 onChange 中更新状态。

Answer 2

您正在更改 days 状态 onChange of time 但提供给 Table 的数据是 data.days。

直接替换

 <Table rowKey="date" pagination={false} dataSource={data.days} columns={columns}/>

与

 <Table rowKey="date" pagination={false} dataSource={days} columns={columns}/>