React przekazywanie danych z klasy do klasy

0

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;

0

@szatkus:
W jaki sposób ustawić stan żeby się zmieniał w zależności od wartości inputa?


setState({width: event.target.value + "px"})

W sensie coś takiego jak u góry , tylko jak podam event.target.value to znowu Main.js nie odczyta tego value i wyrzuci błąd

1

W Main.js:

    changeWidth = (value) =>{
        this.setState({width: value + 'px'});
    }

    render(){
     ...
        <ControlPanel onChange={this.changeWidth} />
     ...
     }

W ControlPanel.js:

    render(){
     ...
         <input type="range" min="200" max="500" onInput={this.props.onChange}></input>
     ...
     }

1 użytkowników online, w tym zalogowanych: 0, gości: 1