React, wartosci z kilku innych komponentów

Question

Uczę się reacta i zacząłem robić dosyć prosty projekt:

Rysunek opornika zrobiony przy użyciu CSS gdzie po kliknięciu  na paski można zmienić/ustawić ich kolory i automatycznie odczytywana jest wartość oporu.

Udało mi się narysować taki "opornik", napisać funkcje do zmiany kolorów i stanów po kliknięciu. 

 

Zależy mi na tym aby wartość (na rysunku w czerwonym kwadracie) była wyliczana - obecnie jest przypisana na stałe.

Nie wiem jak się dobrać do stanów poszczególnych pasków czyli np wartość stanu z 1 komponentu * 100 + wartość stanu z 2  komponentu * 10 itd wartość stanu nazwałem trochę bez sensu "segment".

 

Poniżej kody

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import LegComponent from './LegComponent';
import SideComponent from './SideComponent';
import ColorSegmentComponent from './ColorSegmentComponent';
import BreakSegmentComponent from './BreakSegmentComponent';
import ResultComponent from './ResultComponent';

const destination = document.querySelector("#container");

const segments = [];

let nextSegmentPos = 210;
const colorSegmentWidth = 30;
const breakSegmentWidth = 10;
const marginBetweenSegment = 2; 

for(let i=0; i<5; i++){
    nextSegmentPos += marginBetweenSegment;
    segments.push(<ColorSegmentComponent key={`color + ${i}`} left={nextSegmentPos}/>);
    nextSegmentPos += colorSegmentWidth;
    nextSegmentPos += marginBetweenSegment;
    if(i==4) {
        break;
    }
    segments.push(<BreakSegmentComponent key={`break + ${i}`} left={nextSegmentPos}/>);
    nextSegmentPos += breakSegmentWidth;
}

ReactDOM.render (
    <div>
        <LegComponent left={7}/>
        <SideComponent radiusTopLeft={50} radiusBottomLeft={50} radiusTopRight={0} radiusBottomRight={0} left={160}/>
        {segments}
        <SideComponent radiusTopLeft={0} radiusBottomLeft={0} radiusTopRight={50} radiusBottomRight={50} left={420}/>
        <LegComponent left={474}/>
        <ResultComponent result={10}/>
    </div>,
    destination
)

 

ResultComponent (ten jest przypisany na stałe):

import React, {Component} from 'react';

class ResultComponent extends Component {
    render() {
        return (
            <p>Opornik ma {this.props.result} </p>
        );
    }
}

export default ResultComponent;

 

ColorSegmentComponent

class ColorSegmentComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            color: 'white',
            segment: 0
        }

        this.changeColor = this.changeColor.bind(this);
    }

    changeColor(e) {

        const segments = [
            {
                color: 'silver'
            },
            {
                color: 'gold'
            },
            {
                color: 'black'
            },
            {
                color: 'brown'
            },
            {
                color: 'red'
            },
            {
                color: 'orange'
            },
            {
                color: 'yellow'
            },
            {
                color: 'green'
            },
            {
                color: 'blue'
            },
            {
                color: 'purple'
            },
            {
                color: 'grey'
            },

        ]

        let i = this.state.segment;

        this.setState({
            color: segments[i].color,
            segment: this.state.segment+1 > segments.length-1 ? 0 : this.state.segment+1
        })
    }

    render() {

        const colorSegmentStyle = {
            backgroundColor: this.state.color,
            border: '1px solid black',
            boxSizing: 'border-box',
            height: 50,
            left: this.props.left,
            position: 'absolute',
            top: 180,
            width: 30,
        }

        return(
            <div>
                <button onClick={this.changeColor} style={colorSegmentStyle} />
            </div>
        );
    }
}

export default ColorSegmentComponent;

 

pozostałe komponenty to divy z klasami CSS ("nóżki opornika" - prostokąty, półokrągłe boki przy "nóżkach" i szare prostokąty/przerwy między kolorowymi paskami) 

Answer 1

Hmm, nie jestem expertem Reacta, więc poczekajmy jak się wypowie ktoś kto nim jest, ale jeżeli chcesz zebrać wynik z kilku komponentów, musisz zrobić komponent, który będzie rodzicem dla wszystkich pozostałych. Starając się bardziej obrazowo:

Komponent rodzic (tutaj dajesz swój licznik)

• Komponent 1
• Komponent 2
• Komponent 3

Poprzez wyniesienie stanu z komponentów 1..3 do rodzica (https://pl.reactjs.org/docs/lifting-state-up.html), możesz w komponencie rodzicu, wykonywać obliczenia na podstawie komponentów dzieci.

Comments

Dzięki - przebudowałem trochę komponenty i udało się osiągnąć drugą funkcjonalność tzn. klikając na pasek zmienia się wartość w "liczniku" na razie odpowiednio:

razy 1 dla 1 paska

razy 10 dla drugiego

razy 100 dla trzeciego itd.

Natomiast nie mam pomysłu jak odpalić 2 funkcjonalności na raz przy onClick - jedna z komponentu (zmieniającą kolory i zwiększajaca wartosc "na pasku", którą później mnoży się przez 1,10,100...itd) i drugą przekazaną w propsach.

Pozatym coś mi się wydaje, że przekombinowałem.

 

Obecnie wygląda to tak:

 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ResistorComponent from './ResistorComponent';

const destination = document.querySelector("#container");

ReactDOM.render (
    <div>
        <ResistorComponent />
    </div>,
    destination
)

nowy komponent Resistor.js z licznikiem i funkcją z parametrem do zmiany jego wartości

import React, {Component} from 'react';
import LegComponent from './LegComponent';
import SideComponent from './SideComponent';
import ColorSegmentComponent from './ColorSegmentComponent';
import BreakSegmentComponent from './BreakSegmentComponent';
import ResultComponent from './ResultComponent';

class Resistor extends Component {

    constructor(props){
        super(props);
        this.state= {
          counter: 0
        };
        this.updateCounter = this.updateCounter.bind(this);
      }

    updateCounter(param) {
        this.setState({counter: this.state.counter + param})
    }

    render() {

        const segments = [];

        let nextSegmentPos = 210;
        const colorSegmentWidth = 30;
        const breakSegmentWidth = 10;
        const marginBetweenSegment = 2; 

        for(let i=0; i<5; i++){
            nextSegmentPos += marginBetweenSegment;
            segments.push(<ColorSegmentComponent update={this.updateCounter} segment={(Math.pow(10,i))} key={`color + ${i}`} left={nextSegmentPos}/>);
            nextSegmentPos += colorSegmentWidth;
            nextSegmentPos += marginBetweenSegment;
            if(i==4) {
                break;
            }
            segments.push(<BreakSegmentComponent key={`break + ${i}`} left={nextSegmentPos}/>);
            nextSegmentPos += breakSegmentWidth;
        }

        return(
            <div>
                <LegComponent left={7}/>
                <SideComponent radiusTopLeft={50} radiusBottomLeft={50} radiusTopRight={0} radiusBottomRight={0} left={160}/>
                {segments}
                <SideComponent radiusTopLeft={0} radiusBottomLeft={0} radiusTopRight={50} radiusBottomRight={50} left={420}/>
                <LegComponent left={474}/>
                <ResultComponent result={this.state.counter}/>
            </div>
        );
    }
}

export default Resistor;

lekko przebudowany komponent ColorSegmentComponent.js

import React, {Component} from 'react';

class ColorSegmentComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            color: 'white',
            segmentValue: 1
        }

        this.changeColor = this.changeColor.bind(this);
    }

    changeColor(e) {

        const segments = [
            {
                color: 'silver'
            },
            {
                color: 'gold'
            },
            {
                color: 'black'
            },
            {
                color: 'brown'
            },
            {
                color: 'red'
            },
            {
                color: 'orange'
            },
            {
                color: 'yellow'
            },
            {
                color: 'green'
            },
            {
                color: 'blue'
            },
            {
                color: 'purple'
            },
            {
                color: 'grey'
            },

        ]

        let i = this.state.segment;

        this.setState({
            color: segments[i].color,
            segment: this.state.segmentValue+1 > segments.length-1 ? 0 : this.state.segmentValue+1
        })

    }

    render() {

        const colorSegmentStyle = {
            backgroundColor: this.state.color,
            border: '1px solid black',
            boxSizing: 'border-box',
            height: 50,
            left: this.props.left,
            position: 'absolute',
            top: 180,
            width: 30,
        }

        return(
            <div>
                <button onClick={() => this.props.update(this.state.segmentValue * this.props.segment)} style={colorSegmentStyle} />
            </div>
        );
    }
}

export default ColorSegmentComponent;