Como enviar estado / props para outro componente no React with onClick?
Os adereços e o estado são os principais conceitos do React. Na verdade, apenas mudanças nos props e / ou gatilho de estado React para renderizar novamente seus componentes e potencialmente atualizar o DOM no navegador
Suportes : permite que você passe dados de um componente pai para um componente filho.
Estado : Enquanto os props permitem que você passe dados de um componente pai para um componente filho, o estado é usado para alterar o componente, bem, o estado de dentro. Mudanças no estado também acionam uma atualização da IU.
Enviando estado / props para outro componente usando o evento onClick: Então, primeiro armazenamos o estado / props no componente pai, ou seja, em qual componente disparamos o evento onClick. Então, para passar o estado para outro componente, simplesmente o passamos como um suporte. Para uma melhor compreensão, veja este exemplo.
Para componente baseado em classe.
App.js :
Javascript
// First Component i.e. App
import React, { Component } from
'react'
;
import
'./App.css'
import Component2 from
'./Component2'
;
class App extends Component {
state={data:
""
}
changeState =() => {
this
.setState({data:`state/props of parent component
is send by onClick event to another component`});
};
render(){
return
(
<div className=
"App"
>
<Component2 data={
this
.state.data} />
<div className=
"main-cointainer"
>
<h2>Compnent1</h2>
<button onClick={
this
.changeState} type=
"button"
>
Send state
</button>
</div>
</div>
);
}}
export
default
App;
Component2.js:
Javascript
import React from
'react'
;
const Component2 = (props) => {
return
(
<div className=
"main-cointainer"
>
<h2>Compnent2</h2>
<p>{props.data} </p>
</div>
)
}
export
default
Component2;
Para componente baseado em função.
App.js:
Javascript
// First component i.e App
import React, { useState } from
'react'
;
import
'./App.css'
import Component2 from
'./Component2'
;
function
App() {
const [state, setstate] = useState({data:
""
})
const changeState =() => {
setstate({data:`state/props of parent component
is send by onClick event to another component`});
};
return
(
<div className=
"App"
>
<Component2 data={state.data} />
<div className=
"main-cointainer"
>
<h2>Compnent1</h2>
<button onClick={changeState} type=
"button"
>
Send state
</button>
</div>
</div>
);
}
export
default
App;
Component2.js:
Javascript
// Second Component
import React from
'react'
;
import
'./Component2.css'
export
default
function
Component2(props) {
return
(
<div className=
"main-cointainer"
>
<h2>Compnent2</h2>
<p>{props.data} </p>
</div>
)
}
Saída :
Antes de clicar no botão:
Depois de clicar no botão:
Aprendendo inglês e usando o Anki? Use o Faluchu e esqueça os cartões. É gratis!
Usar o Faluchu