Ich erstelle ein Formular, mit dem Bestellungen aktualisiert werden können. Die Eingabefelder müssen mit dem aktuellen Status jedes von mir gerenderten Objekts ausgefüllt werden und ich möchte das Eingabefeld bearbeiten können. Ich habe meinen Code vereinfacht nur ein Eingabefeld an und glauben, dass ich in der Lage, die Mehrheit der zu tun, was ich bin versucht, den folgenden Code verwenden -Aktualisieren geschachtelten Zustand in Objekten durch ein Eingabeelement in React
class EditOrderForm extends React.Component {
...
handleChange(e, key) {
const order = this.props.orders[key];
const updatedOrder = {
...order,
[e.target.name]: e.target.value
}
this.props.updateOrder(key, updatedOrder);
}
renderEditOrderForm(key) {
const order = this.props.orders[key]
return (
<div key={key}>
<form >
<input type="text" name="name" value={order.data.name} placeholder="order name" onChange={(e) => this.handleChange(e, key)} />
...
</form>
</div>
)
}
render() {
return (
<div>
<h2>Edit Orders</h2>
{
Object.keys(this.props.orders).map(this.renderEditOrderForm)
}
</div>
)
}
}
*************Parent Component*************
class AppComponent extends React.Component {
import EditOrderForm from './EditOrderForm';
...
updateOrder(key, updatedOrder) {
const orders = [...this.state.orders]
orders[key] = updatedOrder;
this.setState({ orders: orders });
}
...
}
Der Staat, der auf der übergeordneten Komponentenebene festgelegt ist, ist ein Array von Objekten und die Datenstruktur für die Objekte, die ich renderEditOrderForm()
vorbei bin hat die Struktur -
{
data: Object,
meta: Object,
__proto__: Object
}
Wo data: Object
die Schlüssel-Wert-Paare enthält, die ich in diesem Fall zu ändern bin versucht, die Schlüssel name
verschachtelt unter data: Object
(oben) und ich möchte es wieder in das Array zurück aktualisiert/bearbeitet Ich bin leicht Lage jedoch den Namen eines zu aktualisieren, wenn ich versuche, es zu aktualisieren (zum Beispiel, geben Sie ein ‚x‘) auf das Objekt nun diese Struktur -
{
data: Object,
meta: Object,
name: "John Smithx"
__proto__: Object
}
ich, dass [e.target.name]: e.target.value
Intuit kann, ist wahrscheinlich die Täter, aber ich bin völlig ratlos, wie ich auf den verschachtelten Schlüssel zugreifen soll in data: Object
- Ich habe e.target.data.name versucht, aber das gibt mir undefined
und habe eine Vielzahl anderer versucht Kombinationen. Ohne Redux zu verwenden (habe leider keine Zeit, um aus Zeitgründen zu lernen), weiß jemand, wie ich auf den Schlüssel name
zugreifen/zielen kann, um in data: Object
verschachtelt zu werden?