は、私は絵を見る、キー/値のペアのオブジェクトを編集するためのフォームを構築してい

Question

複雑なフォームの編集キーと値のペアに反応しますコンテナコンポーネント

items: [{ 
    name: "Product Name", 
    sku: "00001", 
    attributes: { 
     width: "value", 
     height: "value", 
     length: "value", 
     color: "value" 
    } 
}, 
{ 
    name: "Product Name 2", 
    sku: "00002", 
    attributes: { 
     description: "Hello World", 
     weight: "250", 
     quantity: "500", 
     hello: "World" 
    } 
}] 

次に、データを小道具を介して子コンポーネントに渡します。これは、フォームのコードです：今

class EditForm extends Component { 
    render() { 
     let editForm = this.props.items && this.props.items.map((item, idx) => { 
      return(
       <tr key={item.sku}> 
        <td className="edit-table"> 
         <input 
          value={item.name} 
          name={item.name} 
          onChange={(e)=> this.props.onChange(e, idx)} 
         /> 
        </td> 
        <td className="edit-table"> 
         <ul className="item-attributes"> 
          {Object.keys(item.attributes).map((key) => { 
           return (<li key={key}> 
                <label>{key}</label> 
                <input 
                 value={item.attributes[key]} 
                 onChange={(e) => this.props.onChange(e, idx) } 
                /> 
               </li>) 
          })} 
         </ul> 
        </td> 
       </tr> 
      ) 
     }) 

     return(
      <table className="editcontainer-table"> 
       <thead> 
        <tr> 
         <th>SKU</th> 
         <th>Attributes</th> 
        </tr> 
       </thead> 
       <tbody> 
        {editForm} 
       </tbody> 
      </table> 
     ); 
    } 
} 

、これは私がこだわっているところ、私は私が状態のオブジェクトを編集して返送するためのonChange機能がどのように動作するかを把握しようとしているあります更新のためにサーバーに送信します。