reactjs - 如何在设置值时更改 React 中的输入值并在状态是数组对象时更新状态？

Question

这是我的代码。

class Sample extends Component {
constructor(props) {
    super(props);
    this.state = {
        editData: null,
        editModalOpen: false,
        obj: {
            "content": [{
                "createdOn": {
                    "year": 1399,
                    "month": 8,
                    "day": 8
                },
                "updatedBy": null,
                "createdBy": "admin",
                "id": 1001,
                "dataFileContainerDtoList": [{
                    "updateOn": null,
                    "createdOn": {
                        "year": 1399,
                        "month": 8,
                        "day": 8
                    },
                    "updatedBy": null,
                    "createdBy": "admin",
                    "id": 1053,
                    "name": "Sheet1",
                    "headerDtoList": [{
                        "updateOn": null,
                        "createdOn": {
                            "year": 1399,
                            "month": 8,
                            "day": 8
                        },
                        "updatedBy": null,
                        "createdBy": "admin",
                        "id": 1109,
                        "name": "Fname",
                        "indexedName": "Fname",
                        "candidateName": null,
                        "custom": false
                    },
                    {
                        "updateOn": null,
                        "createdOn": {
                            "year": 1399,
                            "month": 8,
                            "day": 8
                        },
                        "updatedBy": null,
                        "createdBy": "admin",
                        "id": 1111,
                        "name": "license number",
                        "indexedName": "license number",
                        "candidateName": null,
                        "custom": false
                    }]
                }, {
                    "updateOn": null,
                    "createdOn": {
                        "year": 1399,
                        "month": 8,
                        "day": 8
                    },
                    "updatedBy": null,
                    "createdBy": "admin",
                    "id": 1054,
                    "name": "Sheet2",
                    "headerDtoList": [{
                        "updateOn": null,
                        "createdOn": {
                            "year": 1399,
                            "month": 8,
                            "day": 8
                        },
                        "updatedBy": null,
                        "createdBy": "admin",
                        "id": 1113,
                        "name": "Fname",
                        "indexedName": "Fname",
                        "candidateName": null,
                        "custom": false
                    },{
                        "updateOn": null,
                        "createdOn": {
                            "year": 1399,
                            "month": 8,
                            "day": 8
                        },
                        "updatedBy": null,
                        "createdBy": "admin",
                        "id": 1115,
                        "name": "license number",
                        "indexedName": "license number",
                        "candidateName": null,
                        "custom": false
                    }, {
                        "updateOn": null,
                        "createdOn": {
                            "year": 1399,
                            "month": 8,
                            "day": 8
                        },
                        "updatedBy": null,
                        "createdBy": "admin",
                        "id": 1116,
                        "name": "desc",
                        "indexedName": "desc",
                        "candidateName": null,
                        "custom": false
                    }]
                }]
            }],
            "first": true,
            "numberOfElements": 13,
            "size": 1000,
            "number": 0
        }
    }
}



editFileData = (editData) => {
    this.editModalOpen();
    this.setState({
        editData: editData
    })
}

editFileDataHeaderChange = (i, j) => {
    const { editData } = this.state;
    this.setState({
        editData: editData  // How change the state of editData
    })
}

editModalOpen = () => {
    this.setState({
        editModalOpen: true
    })
}


handleEditTabChange = (event, value) => {
    this.setState({
        editIndexValue: value
    })
}



render() {
    return (
        <div>
            <TableBody>
                {this.state.obj != null && this.state.obj.map((item) => (
                    <StyledTableRow key={item.id}>
                        <StyledTableCell align="right">
                            <EditIcon onClick={() => this.editFileData(item)}/>
                        </StyledTableCell>
                    </StyledTableRow>
                ))}
            </TableBody>


            <Dialog onClose={this.editFileModalClose} open={editModalOpen}>
                <DialogContent dividers>
                    <form enctype="multipart/form-data">
                        <Grid container spacing={3}>
                            {editData !== null &&
                                [<Grid item xs={12} sm={12} md={12} lg={12}>
                                    <div>
                                        <AppBar position="static" color="default">
                                            <Tabs
                                                value={editIndexValue}
                                                onChange={this.handleEditTabChange}
                                            >
                                                {editData.dataFileContainerDtoList.map((item, i) =>
                                                    <Tab label={editData.dataFileContainerDtoList[i].name} id={'full-width-tab-' + i} aria-controls={'full-width-tabpanel-' + i} />
                                                )}
                                            </Tabs>
                                        </AppBar>
                                        <SwipeableViews
                                            index={editIndexValue}
                                            onChangeIndex={this.handleChangeIndex}
                                        >

                                            {editData.dataFileContainerDtoList.map((item, i) =>
                                                <TabPanel value={editIndexValue} index={i}>
                                                    {item.headerDtoList.map((item, j) =>
                                                        <TextField
                                                            onChange={this.editFileDataHeaderChange}
                                                            value={editData.dataFileContainerDtoList[i].headerDtoList[j].name}
                                                            type="text"
                                                        />
                                                    )}
                                                </TabPanel>
                                            )}
                                        </SwipeableViews>
                                    </div>
                                </Grid>,
                                <Grid item xs={12} sm={12} md={12} lg={12} className={classNames(classes.textCenter)}>
                                    <Button
                                        variant="contained"
                                        color="primary"
                                        size="large"
                                        onClick={this.editSubmitFileData}>
                                        Submit
                                    </Button>&nbsp;&nbsp;&nbsp;
                            </Grid>]}
                        </Grid>
                    </form>
                </DialogContent>
            </Dialog>
        </div>
    )
}

}

我有带有“内容”键的 obj，它是许多对象的数组。我"content.dataFileContainerDtoList[i].headerDtoList[i].name"以模态显示并需要对其进行编辑。但是由于我设置的值，无法以模式更改 Textfield 中的值并设置新状态。如何使输入的值更改并更新对象状态的一部分？

标签： reactjsobject