Блог

У меня есть функциональный компонент с именем 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;
 

Вы должны добавить свои данные в состояние и обновить состояние в onChange.

Вы меняете days состояние при изменении времени, но данные, предоставленные в таблицу, есть data.days .

Просто замените

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

с

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