Witam, w ramach nauki chciałem napisać aplikację która zmienia wartość style div'a poprzez input range i w pewnym momencie nie wiem jak pobrać dane z rodzica do dziecka , tak aby gdy u dziecka ta wartość się zmieni to u rodzica też.
Problem polega na tym że sam div który się zmienia mam w Main.js a input mam w ControlPanel.js i nie mam pojęcia jak to połączyć.
Mam nadzieje że dobrze to wyjaśniłem.
Struktura plików wygląda tak:
App.js
[folder]Components: ControlPanel.js, Main.js
Main.js :
import React from 'react';
import './Main.css';
import ControlPanel from './ControlPanel';
class Main extends React.Component {
constructor(){
super();
this.state = {
width: '200px'
}
}
render(){
const styleOBJ = {width: this.state.width}
return(
<div id="all">
<div id="left">
<h1>Panel Ustawień</h1>
<ControlPanel/>
</div>
<div id="right">
<div id="result_panel">
<div id="result" style={styleOBJ}>
Testowy Div
</div>
</div>
</div>
</div>
);
}
}
export default Main;
ControlPanel.js :
import React from 'react';
class ControlPanel extends React.Component{
changeWidth()
{
//Tutaj pojawia się problem
}
render(){
return(
<div id="control_panel">
Szerokość<br/>
<input type="range" min="200" max="500" onInput={this.changeWidth}></input>
</div>
);
}
}
export default ControlPanel;