webentwicklung-frage-antwort-db.com.de

Übergeben Sie Artikeldaten an ein React Modal

Ich habe eine Karte, die nur wenige Elemente rendert, und eine der Linien befindet sich unten

<a onClick={()=> this.setState({"openDeleteModal":true)}>Delete</a>

Natürlich möchte ich ein Modal öffnen, wenn der Benutzer auf Löschen klickt, aber ich muss ein paar Dinge wie den Namen des Elements und die ID des Elements übergeben, um den Löschvorgang auszuführen. Wie kann ich den Namen an den Modal weitergeben?

Ich kann den Obj-Namen wie folgt an a binden Löschen

Bin ich auf dem richtigen Weg?

5
Giala Jefferson

Versuchen Sie bei der Arbeit mit React-Anwendungen nicht, Werte an andere Komponenten zu übergeben, sondern den Status zu aktualisieren, dem Ihre Komponenten ausgesetzt sind. Angenommen, Ihre modale Komponente ist ein untergeordnetes Element derselben Komponente, zu der Ihre Liste von a-Tags gehört, können Sie die Werte festlegen, die Sie für das Modal in Bezug auf den Status verfügbar machen möchten, und die Eigenschaft aktualisieren, die signalisiert, ob modal ist offen oder nicht. Zum Beispiel:

class Container extends React.Component {
    constructor(props) {
       super(props)
       this.state = {
          openDeleteModal: false,
          activeItemName: '', //state property to hold item name
          activeItemId: null, //state property to hold item id
       }
    }

    openModalWithItem(item) {
       this.setState({
          openDeleteModal: true,
          activeItemName: item.name,
          activeItemId: item.id
       })
    }

    render() {

    let buttonList = this.props.item.map( item => {
      return (<button onClick={() => this.openModalWithItem(item)}>{item.name}</button>
    });

    return (
     <div>
        {/* Example Modal Component */}
        <Modal isOpen={this.state.openDeleteModal}  
               itemId={this.state.activeItemId}
               itemName={this.state.activeItemName}/>
        { buttonList }
     </div>
    )
    }
}
7
syllabix

Kopieren meiner Antwort von Wie man Requisiten an einen Modal weitergibt

Ähnliches Szenario

constructor(props) {

    super(props)


    this.state = {
      isModalOpen: false,
      modalProduct: undefined,
    }
}

//****************************************************************************/

render() {

    return (
        <h4> Bag </h4>
        {this.state.isModalOpen & (
          <Modal 
            modalProduct={this.state.modalProduct}
            closeModal={() => this.setState({ isModalOpen: false, modalProduct: undefined})
            deleteProduct={ ... }
          />
        )

        {bag.products.map((product, index) => (
        <div key={index}>
            <div>{product.name}</div>
            <div>£{product.price}</div>
            <div>
            <span> Quantity:{product.quantity} </span>
            <button onClick={() => this.props.incrementQuantity(product, product.quantity += 1)}> + </button>
            <button onClick={() => this.decrementQuantity(product)}> - </button> // <----
            </div>
        </div>
        ))}
    )
}

//****************************************************************************/

decrementQuantity(product) {

    if(product.quantity === 1) {
        this.setState({ isModalOpen: true, modalProduct: product })
    } else {
        this.props.decrementQuantity(product)
    }
}
0
varoons

Es wäre schön, wenn Sie etwas mehr Code zum besseren Verständnis geben würden. Soweit ich weiß, können Sie einen Status mit dem Namen "selectedItem" erstellen und ihn auf "Click of a" setzen. Wenn Sie dann das Modal bestätigen, können Sie dies übergeben Sie die erforderlichen Daten aus dem Staat ..

0
JiN