データを送信してフォームの行を削除する適切な方法

Question

商品のリストがあり、この商品には異なる価格が含まれています。ユーザが製品を選択すると、彼はすべての価格を編集することができる。これは、次のようになります。

_renderPriceRow() { 
    return (
    this.props.product.prices.map((price, i) => { 
     return (
     <tr key={'pricerowinput-' + Math.random()}> 
      <td > 
      <input type="text" className="form-control" defaultValue={price.quantity}/> 
      </td> 
      <td > 
      <input type="text" className="form-control" defaultValue={price.name}/> 
      </td> 
      <td > 
      <input type="text" className="form-control" defaultValue={price.price}/> 
      </td> 
      <td> 
      <button type="button" className="btn btn-sm" aria-label="Delete price" onClick={() => alert("Price deleted")}> 
       <span className="glyphicon glyphicon-trash" aria-hidden="true"></span> 
      </button> 
      </td> 
     </tr> 
    ); 
    }) 
); 
} 

彼らは他の製品を選択した場合は、デフォルト値が変更されません変更しないかのように行が再レンダリングますので、私は、行のキーをランダム化し。

小道具：

const mapStateToProps = (state) => { 
    const products = state.products.items; 
    const isEmpty = state.products.items === undefined || state.products.items.size === 0 || state.productSelected === null; 
    if(isEmpty) { 
    return ({product: null}); 
    } 
    return { 
    product: products.get(state.productSelected) 
    } 
}; 

ので、製品が製品の（フィルター）のリストがある店から取られています。

次のステップでは、実際には2つの質問があります。 1.行を追加または削除するにはどうすればよいですか？ 2.テーブルの価格を配列に、他の商品フィールド（表示されていない）をディスパッチできるオブジェクトにどのように組み入れますか？

還元のため、すべてが単なる財産です。だからコンポーネントに取り込むのは簡単でした。どのようにそれらを得るには？

Answer 1

すべての値がReduxストアで保持されている場合は、そのストアを更新して値を追加および削除する必要があります。

あなたはあなたのテーブルの入力フィールドにonChangeハンドラを追加することができます。

updateFieldはあなたの店を更新するための減速をトリガーReduxのアクションをある

<input 
    type="text" 
    className="form-control" 
    defaultValue={price.quantity} 
    onChange={this.props.store.updateField} 
/> 

。

行全体を削除する場合は、そのエントリをストアから削除するボタンonClickの操作を開始します。どの行をイベントターゲットから削除するかを推測することができます。