Richtiger Weg zum Senden von Daten und Löschen von Zeilen im Formular reagieren

Question

Ich habe eine Liste von Produkten und diese Produkte enthalten unterschiedliche Preise. Wenn ein Benutzer ein Produkt auswählt, kann er alle Preise bearbeiten. Das sieht wie folgt aus:

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

ich die Schlüssel für die Zeilen randomisierten so die Zeilen wie erhalten erneut gerendert, wenn sie sich nicht ändern die Standardwerte nicht ändern wird, wenn ein anderes Produkt ausgewählt ist. Props

:

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

So das Produkt aus dem Lager entnommen wird, wo eine (gefilterte) Liste der Produkte liegt.

Für meine nächsten Schritte habe ich eigentlich zwei Fragen: 1. Wie würde ich eine Zeile hinzufügen oder löschen? 2. Wie würde ich die Preise in der Tabelle zu einem Array zusammenstellen und die anderen Produktfelder (nicht abgebildet) zu einem Objekt, das ich versenden kann?

Aufgrund von Redox ist alles nur eine Eigenschaft. Also war es einfach, sie in die Komponente zu bekommen. Wie bekomme ich sie raus?

Answer 1

Wenn alle Werte in Ihrem Redux-Speicher beibehalten werden, müssen Sie Werte hinzufügen und entfernen, indem Sie diesen Speicher aktualisieren.

Sie können einen onChange Handler auf den Tisch Eingabefelder hinzufügen:

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

wo updateField eine Redux Aktion ist, die eine Reduzierung Ihr Geschäft zu aktualisieren auslöst.

Wenn Sie die gesamte Zeile entfernen möchten, führen Sie eine Aktion in der Schaltfläche onClick aus, die diesen Eintrag aus dem Geschäft entfernt. Sie können ableiten, welche Zeile aus dem Ereignisziel entfernt werden soll.