2017-05-03 5 views
1

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?

Antwort

0

Sie müssen das Feld order.data.name ändern, aber Ihr Code fügt dem Objekt order nur ein neues Feld hinzu. Ersetzen

handleChange(e, key) { 
    const order = this.props.orders[key]; 
    const updatedOrder = { 
     ...order, 
     [e.target.name]: e.target.value 
    } 
    this.props.updateOrder(key, updatedOrder); 
} 

mit

handleChange(e, key) { 
    const order = this.props.orders[key]; 
    let updatedOrder = { ...order }; 
    updatedOrder.data[e.target.name] = e.target.value; 
    // or if you have only 1 field called name, you can use updatedOrder.data.name = e.target.value; 
    this.props.updateOrder(key, updatedOrder); 
} 
Verwandte Themen