Java >> Java tutorial >  >> Java

Overfør data fra barn til forældrekomponent i React

Java

I denne vejledning vil vi se, hvordan kommunikationen fra barn til forældrekomponent foregår i React.

Overførsel af data fra barnet til overordnet komponent i React sker ved at bruge følgende trin-

  • Opret en funktion i den overordnede komponent, der tager en parameter ind. Denne tilbagekaldsfunktion henter data fra den underordnede komponent.
  • Overfør denne funktion som en rekvisit fra den overordnede til den underordnede komponent.
  • Den underordnede komponent kalder den overordnede tilbagekaldsfunktion ved hjælp af rekvisitter.

Lad os prøve at forstå kommunikationen mellem børn og forældre ved hjælp af eksempler. I det første eksempel har vi bare en formular med et enkelt input-element i Child-komponenten, og de data, der er indtastet i denne formular, sendes derefter til den overordnede komponent.

Andet eksempel vil være lidt komplekst, hvor vi har en formular til at tilføje produkter, og derefter tilføjes disse data til den allerede eksisterende liste over produkter.

1. I eksemplet er der to komponenter Parent.js og Child.js

Child-komponenten har en formular, som sender sine data op til den overordnede komponent, når formularen indsendes. Bemærk at react-bootstrap bruges til styling her, som kan installeres med npm install react-bootstrap bootstrap

Parent.js 
import Child from "./Child"
import React, {useState} from "react";

const Parent = () =>{
  const [initText, setText] = useState('');
  const callbackHandler = (childData) =>{
    setText(childData);
  }
  return (
    <div style={{ display: 'block', 
    width: 700, 
    padding: 30
    }}>
        <Child parentCallbackFunction={callbackHandler}></Child>
        {initText}
    </div>
  );
}

export default Parent;

Her i Child-komponenten tilføjes en prop (parentCallbackFunction), hvis værdi er en funktion (callbackHandler), som til sidst vil blive kaldt fra den underordnede komponent.

Child.js 
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.css';

const Child = (props) => {

  const submitHandler = (event) =>{
    event.preventDefault();
    props.parentCallbackFunction(event.target.tbox.value);
  }
  return (
    <div>
      <Form onSubmit={submitHandler}>
        <Form.Group className="mb-3">
          <Form.Label>Enter Value</Form.Label>
          <Form.Control type="text" name = "tbox" placeholder="Enter value" />
        </Form.Group>
        <Button variant="primary" type="submit">Submit</Button>
      </Form>
    </div>
  );
}

export default Child;
  1. I formularen har vi et input tekstfelt og en send-knap. Ved at klikke på knappen sendes formularen, som også udløser en submitHandler-funktion.
  2. event.preventDefault() metode forhindrer standardhandlingen i at forekomme, hvilket betyder, at formen ikke sendes til en server, når du klikker på knappen Send.
  3. props.parentCallbackFunction() metodekald resulterer i, at tilbagekaldsfunktionen udføres i det overordnede. Her overføres værdien af ​​tekstboksen som en funktionsparameter.

2. I det andet eksempel har vi en ProductForm til at udfylde produktdata og også en tabel til at vise de eksisterende produkter, og tabellen skal opdateres med produktet tilføjet ved hjælp af ProductForm.

Efter at have klikket på Tilføj produkt

Ansøgningen er opdelt i 3 komponenter-

  • ProductForm.js hvor brugeren kan indtaste produktnavn og pris. I formularen er der også en "Tilføj produkt"-knap, som indsender formularen.
  • ProductItem.js som viser listen over produkter.
  • Products.js som fungerer som en overordnet komponent, der sikrer, at det produkt, der tilføjes via formularen, føjes til den allerede eksisterende liste over produkter, og den opdaterede liste skubbes til ProductItem, så det nyligt tilføjede produkt også vises.

Produkt tilføjet ved hjælp af ProductForm skal videregives til produkterne, hvilket er et eksempel på kommunikation mellem børn og forældre i React. Opdateret liste fra produkter skal sendes til ProductItem, som er et eksempel på kommunikation mellem forældre og underordnede komponenter i React.

Products.js 
import ProductForm from "./ProductForm";
import ProductItem from "./ProductItem";
import Table from 'react-bootstrap/Table';
import React, { useState } from "react";

// Initial list of products
const INIT_PRODUCT_CATALOG = [
  { id: 1, name: 'Laptop', price: 455.50 },
  { id: 2, name: 'Mouse', price: 15.89 },
  { id: 3, name: 'USB', price: 10.00 },
  { id: 4, name: 'HDD', price: 55.50 },
];
const Products = () => {
  const [products, setProduct] = useState(INIT_PRODUCT_CATALOG);

  const saveProductItemHandler = (productItem) => {
    setProduct(() => {
      return [productItem, ...products];
    });
  }
  return (
    <div className="container">
      <ProductForm onSaveProductItem={saveProductItemHandler}></ProductForm>
      <hr />
      <Table striped bordered hover size="sm">
        <thead>
          <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>PRICE</th>
          </tr>
        </thead>
        {products.map((val, key) => <ProductItem key={key} item={val} />)}
      </Table>
    </div>
  );
}
export default Products;
  1. Her i Child-komponenten tilføjes en prop (onSaveProductItem), hvis værdi er en funktion (saveProductItemHandler), som til sidst vil blive kaldt fra den underordnede komponent.
  2. SaveProductItemHandler-funktionen får et nyligt tilføjet produkt som en parameter og tilføjer det derefter til den eksisterende række af produkter.
  3. Til den underordnede komponent, ProductItem, er data blevet videregivet ved hjælp af rekvisitter. Her bruges Array.map()-metoden til at iterere produktarray, og i hver iteration kaldes ProductItem-komponenten for at vise den pågældende række af produktdata.
ProductForm.js 
import { useState } from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
const ProductForm = (props) => {
  const [pName, setEnteredName] = useState('');
  const [pPrice, setEnteredPrice] = useState('');

  const handleNameChange = (event) => {
    setEnteredName(event.target.value);
  }
  const handlePriceChange = (event) => {
    setEnteredPrice(event.target.value);
  }

  // Form submission handling
  const submitHandler = (event) => {
    event.preventDefault();
    const productItemData = {
      id: Math.round(Math.random() * 10),
      name: pName,
      price: pPrice
    }
    props.onSaveProductItem(productItemData);
    setEnteredName('');
    setEnteredPrice('');
  }

  return <Form onSubmit={submitHandler}>
    <h2>Product Form</h2>
    <Form.Group className="mb-3">
      <Form.Label>Product Name</Form.Label>
      <Form.Control type="text" name="name" value={pName}
          placeholder="Enter product name" onChange={handleNameChange} />
    </Form.Group>
    <Form.Group className="mb-3">
      <Form.Label>Price</Form.Label>
      <Form.Control type="number" name="price" value={pPrice} min="1" step=".1"
          placeholder="Enter price" onChange={handlePriceChange} />
    </Form.Group>
    <Button variant="primary" type='submit'>Add Product</Button>
  </Form>
}

export default ProductForm;

Når formularen indsendes, kaldes submitHandler-funktionen, hvor productItemData-objektet oprettes ved hjælp af de indtastede værdier, og objektet videregives til den overordnede komponent i props.onSaveProductItem(productItemData); ring.

ProductItem.js 
const ProductItem = (props) => {
  return (
    <tbody>
      <tr>
        <td>{props.item.id}</td>
        <td>{props.item.name}</td>
        <td>{props.item.price}</td>
      </tr>
    </tbody>
  )
}

export default ProductItem;

Det er alt for emnet Videre data fra barn til forældrekomponent i React . Hvis der mangler noget, eller du har noget at dele om emnet, så skriv en kommentar.


Java tag