如何更新从状态空数组中提取的输入值?

Question

我有一个包含输入的表。对于所有输入，我设置状态，然后使用状态将默认值设置到表单输入。然而，什么我卡住了，我试图找出目前是如何我也可以编辑这些默认值，以防我想在我的表中编辑记录。

我做了大量的受控与非受控组件的研究，我认为我的问题是，我把value切换到defaultValue在我的输入，它允许我编辑记录，但它不显示正在设置状态的值。

基本上，我希望能够查看当前记录，其中包含当前输入中的信息，并能够在必要时对其进行编辑。

我有大量的代码，所以我将显示我遇到的小问题。

import React from "react";
import {
Table,
Divider,
Icon,
Row,
Col,
Popconfirm,
Modal,
Input,
Form,
Switch,
} from "antd";
import Moment from "moment";
import userprofileService from "../../services/userProfile";
import PdfService from "../../services/pdfService";
import AppController from "../../controllers/AppController";
class AdminInvoices extends React.Component {
constructor(props) {
super(props);
this.state = {
invoiceData: [],
showInvoice: false,
viewinvoiceData: [],
invoiceID: "",
visible: false,
showpdfID: "",
invoicebilledCompany: "",
};
}
selectInvoices = async () => {
const fetchInvoices = await userprofileService.selectInvoices();
let filterData = fetchInvoices.filter((item) => item.invoice_status === 1);
this.setState({ invoiceData: filterData });
};
componentDidMount = async () => {
await this.selectInvoices();
};
editInvoiceRecord = (e) => {
// Left off here
const name = e.target.name;
const values = e.target.value;
this.setState({
[name]: values,
});
console.log("e target name", name);
console.log("edit invoice edited data", this.state.viewinvoiceData);
console.log("record change was recorded as ", values);
};
render() {
const { TextArea } = Input;
const columns = [
{
title: "Invoice Bill Company To",
dataIndex: "invoice_bill_company_to",
key: "invoice_bill_company_to",
width: 150,
},
{
title: "Action",
key: "action",
width: 150,
render: (record) => (
<span>
<React.Fragment>
<Icon
title="Edit Invoice"
type="edit"
style={{ cursor: "pointer" }}
onClick={() => this.viewInvoice(record, 1)}
/>
<Divider type="vertical" />
<Icon
title="View Invoice Details"
type="eye"
style={{ cursor: "pointer" }}
onClick={() => this.viewInvoice(record, 2)}
/>
</React.Fragment>
</span>
),
},
];
return (
<div className="adminInvoices">
<Table
striped
bordered
hover
variant="dark"
columns={columns}
dataSource={this.state.invoiceData}
scroll={{ x: 1180 }}
/>
<Modal
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
centered
width="850px"
>
<React.Fragment>
<Col md={8}>
<Form.Item label="Invoice Billed Company">
// This is where im stuck....
<Input
name={this.state.viewinvoiceData.invoice_bill_company_to}
onChange={(e) => this.editInvoiceRecord(e)}
value={this.state.viewinvoiceData.invoice_bill_company_to}
disabled={this.state.showInvoice ? false : true}
/>
</Form.Item>
</Col>
</React.Fragment>
</Modal>
</div>
);
}
}
export default AdminInvoices;

Answer 1

我总算弄明白了。事实证明，我的name属性没有正确命名。我将名称更改为硬编码字母，并在默认状态下添加了一个引用该名称的对象，现在我可以根据需要查看和编辑该字段。