“Dados da criança para os pais que passam no React” Respostas de código

Dados da criança para os pais que passam no React

Following are the steps to pass data from child component to parent component:

-In the parent component, create a callback function.
-This callback function will retrieve the data from the child component.
-Pass the cb function to the child as a props from the parent component.
-The child component calls the parent callback function using
props and passes the data to the parent component.

// example :
// step 1:: 
//->Parent component
//-> Create a callback function in Parent component.
import Child from './components/Child';
function App() {
  const alertFunc = (data) => {
    alert(data)
  }
  return (
// step 2:: Pass the cb function to the child component as a props.
    <Child newFunc={alertFunc} />
  );
}
export default App;
 
// step 3:: 
const Child = (props) => {
  // Data in child component
  const data = "HEY abi"
  return (<>
    <h1>{props.data}</h1>
//step 4::The child component calls the parent cb function using props
    <button onClick={() => props.newFunc(data)}>Click Me</button>
  </>);
}
export default Child;
Abhishek

passar dados do componente filho para o componente pai

const { useState } = React;

function PageComponent() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1)
  }

  return (
    <div className="App">
      <ChildComponent onClick={increment} count={count} />         
      <h2>count {count}</h2>
      (count should be updated from child)
    </div>
  );
}

const ChildComponent = ({ onClick, count }) => {
  return (
    <button onClick={onClick}>
       Click me {count}
    </button>
  )
};

ReactDOM.render(<PageComponent />, document.getElementById("root"));
|_Genos_|

Passe o elemento de criança para pai reagir

Parent:

<div className="col-sm-9">
     <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
</div>

Child:

handleLangChange = () => {
    var lang = this.dropdown.value;
    this.props.onSelectLanguage(lang);            
}
Sticky Pingu

passar dados do componente filho para o componente pai

import React, { useState } from "react";

let myState = {};

const GrandParent = () => {
  const [name, setName] = useState("i'm Grand Parent");
  myState.name=name;
  myState.setName=setName;
  return (
    <>
      <div>{name}</div>
      <Parent />
    </>
  );
};
export default GrandParent;

const Parent = () => {
  return (
    <>
      <button onClick={() => myState.setName("i'm from Parent")}>
        from Parent
      </button>
      <Child />
    </>
  );
};

const Child = () => {
  return (
    <>
      <button onClick={() => myState.setName("i'm from Child")}>
        from Child
      </button>
    </>
  );
};
Inquisitive Ibex

passar dados do componente filho para o componente pai

function App() {
  return (
    <div className="App">
      <GrandParent />
    </div>
  );
}

const GrandParent = () => {
  const [name, setName] = useState("i'm Grand Parent");
  return (
    <>
      <div>{name}</div>
      <Parent setName={setName} />
    </>
  );
};

const Parent = params => {
  return (
    <>
      <button onClick={() => params.setName("i'm from Parent")}>
        from Parent
      </button>
      <Child setName={params.setName} />
    </>
  );
};

const Child = params => {
  return (
    <>
      <button onClick={() => params.setName("i'm from Child")}>
        from Child
      </button>
    </>
  );
};
Inquisitive Ibex

Respostas semelhantes a “Dados da criança para os pais que passam no React”

Perguntas semelhantes a “Dados da criança para os pais que passam no React”

Mais respostas relacionadas para “Dados da criança para os pais que passam no React” em JavaScript

Procure respostas de código populares por idioma

Procurar outros idiomas de código

Shell/Bash
C#
C++
C
CSS
HTML
Java
JavaScript
Objective-C
PHP
Python
Sql
Swift
Ruby
TypeScript
Go
Kotlin
Assembly
R
VBA
Scala
Rust
Dart
Elixir
Clojure
Haskell
Matlab
Erlang
Cobol
Fortran
Scheme
Perl
Groovy
Lua
Julia
Delphi
Abap
Lisp
Prolog
Pascal
ActionScript
Basic
Solidity
PowerShell
GDScript
Excel