Reactのinput要素を使用してオブジェクトの入れ子状態を更新する

Question

注文を更新できるフォームを作成しています。入力フィールドには、レンダリングする各オブジェクトの現在の状態を入力する必要があり、入力フィールドを編集できるようにしたいと考えています。

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 }); 
    } 

... 
} 

親コンポーネントレベルで設定の状態がある - 私はちょうど1つの入力フィールドに自分のコードを簡素化し、私は次のコードを使用してしようとしています何の大半を行うことができるよと信じています私はrenderEditOrderForm()に渡しているオブジェクトのためのオブジェクトの配列とデータ構造は、構造がある - この場合にはdata: Objectは私が変更しようとしているキーと値のペアを含む

{ 
    data: Object, 
    meta: Object, 
    __proto__: Object 
} 

を、キーnameはdata: Object（上記）の下にネストされています。更新/編集。私は、オブジェクトが今、この構造を有している（たとえば、「X」を入力します）、私はそれを更新しようとすると、しかし、順序の名前を更新する少しできる午前 -

{ 
    data: Object, 
    meta: Object, 
    name: "John Smithx" 
    __proto__: Object 
} 

私は[e.target.name]: e.target.valueはおそらくであることを直感することができますしかし、私は完全にネストしたキーにアクセスするはずですnamedata: Object - 私はe.target.data.nameを試しましたが、それは私にundefinedを与え、組み合わせ。 Reduxを使用しないと（残念なことに時間の制約のために学習する時間がない）、誰でもnameのキーにアクセスしてどのようにターゲットを絞ってdata: Objectに入れ子にすることができるか知っていますか？

Answer 1

フィールドorder.data.nameを変更する必要がありますが、コードはorderオブジェクトに新しいフィールドを追加するだけです。

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); 
} 

で

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

を交換し