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)