Pytam, gdyż właściwe kończę projekt, kiedy go ostatni (prawie) raz przeglądałam otworzyła mi się strona na jakimś mocnym blogu gdzie jak byk stało, że tego się nie robi.
W moim wypadku wzięło się to stąd, że mam spory niezmienny obiekt sortowalny niezależnie po kilku właściwościach. Dla sortowania po każdej z nich mam button z hadlerem, który sortuje state. I to dziła, jest sprawdzone itd.
Próbowałam to przekomponować i przejąć propsy na zmienną w render, ale do tego nie ma dostępu handler sortowania niestety- pojawia się błąd, że to co trafia do handlera jest niezdefiniowane ( i na logikę jest, bo jest zdefiniowane dopiero w render).
A jeżeli tak być nie może, czy jest jakieś proste obejście?
0
0
Słuchajcie, ja to pytanie traktuje serio nawet jeżeli dla Was jest oczywiste albo obnaża mój poziom...
0
Pokaż kod
0
Maciej Cąderek napisał(a):
Pokaż kod
Cały będzie za długi(chyba)
constructor(props) {
super(props);
this.state = {
counter: 0,
isTeam: 'null',
tag: 'No matter',
isSortNameAscending: false,
isSortScoreAscending: false,
isSortScoreRequired: false,
dyscypliny: this.props.disciplines,
//toSortbyScore: false,
toSortByName:false
};
tu jest konstruktor a istotna zmienna to dyscypliny
handleSortName(event) {
this.setState({
dyscypliny: sortByName(this.state.isSortNameAscending, this.state.dyscypliny)
})
this.state.isSortNameAscending === true ? this.setState({
isSortNameAscending: false
}) : this.setState({
isSortNameAscending: true
});
}
powyżej jest handler
To jest tylko kawałek kodu może najważniejszy. Cały jest tutaj (oczywiście tylko tego komponentu). To chodzi i jest sto razy sprawdzone i nie ma możliwości aby w tm zadaniu ten komponent dostał innego propsa w biegu. Wszystko grało dopóki nie przeczytałam tego bloga.
Tam są jeszcze wykomentowane moje próby modyfikacji
/*
*
* Component displaying and managing list of disciplines with calculated athlete score.
*/
import React from 'react'
import PropTypes from 'prop-types'
import './index.styl'
import {
disciplineScore,
BestScore,
WorstScore,
unique,
filtration,
sortByName,
sortByScore,
individualOrTeam
} from '../../libs/calculate'
import Radio from '../../components/Radios'
import Form from '../../components/Form'
export default class Predictions extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
isTeam: 'null',
tag: 'No matter',
isSortNameAscending: false,
isSortScoreAscending: false,
isSortScoreRequired: false,
dyscypliny: this.props.disciplines,
//toSortbyScore: false,
toSortByName:false
};
this.handleShowSport = this.handleShowSport.bind(this)
this.handleChangeTeam = this.handleChangeTeam.bind(this);
this.handleChangeTag = this.handleChangeTag.bind(this);
this.handleSortName = this.handleSortName.bind(this);
this.handleSortScore = this.handleSortScore.bind(this);
}
handleShowSport(ev) {
const el = ev.target;
const element = el.nextSibling;
const visible = element.classList.contains('c-discipline__content-visible');
if (visible == true) {
element.classList.remove('c-discipline__content-visible');
element.classList.add('c-discipline__content-hidden')
} else {
element.classList.remove('c-discipline__content-hidden');
element.classList.add('c-discipline__content-visible')
}
}
handleChangeTeam(event) {
const t = event.target.value;
switch (t) {
case 'true':
this.setState({
isTeam: 'true'
})
break;
case 'false':
this.setState({
isTeam: 'false'
})
break;
case 'null':
this.setState({
isTeam: 'null'
})
break;
default:
this.setState({
isTeam: 'null'
})
}
this.setState({
isTeam: event.target.value
});
}
handleChangeTag(event) {
this.setState({
tag: event.target.value
});
}
handleSortName(event) {
this.setState({
dyscypliny: sortByName(this.state.isSortNameAscending, this.state.dyscypliny)
})
this.state.isSortNameAscending === true ? this.setState({
isSortNameAscending: false
}) : this.setState({
isSortNameAscending: true
});
}
/*
handleSortName(event) {
this.setState({toSortByName:true})
this.state.isSortNameAscending === true ? this.setState({
isSortNameAscending: false
}) : this.setState({
isSortNameAscending: true
});
console.log(this.state.isSortNameAscending)
}
*/
handleSortScore(event) {
this.setState({
dyscypliny: sortByScore(this.state.isSortScoreAscending, this.state.dyscypliny)
})
this.state.isSortScoreAscending === true ? this.setState({
isSortScoreAscending: false
}) : this.setState({
isSortScoreAscending: true
});
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////
render() {
//preparing criteria for filtration
const test = {tag: this.state.tag, team: this.state.isTeam}
//preparing props for radios
const dataRadio =[{value:'null',text:'All'},{value:'false',text:'Team'},{value:'true',text:'isIndividual'}]
//preparing props for form
const formHeader ='Choose Tag'
let TagList = ['No matter'].concat(unique(this.props.disciplines.map((d) => d.tags)))
let Dyscypliny = this.state.dyscypliny;
//for every item adds score field with score vaule for this athlete
for(let d of Dyscypliny) {d.score= disciplineScore(this.props.athlete.skillset,d.requirements)}
let FiltrowaneDyscypliny = filtration(test, Dyscypliny)
//if(this.state.toSortByName){sortByName(this.state.isSortNameAscending, FiltrowaneDyscypliny);this.setState({toSortByName:false})}
const visibilityToggle = (this.props.isVisible)? '':'hidden';
const colorToggler =(discipline)=>{
let bestscore = BestScore(this.props.athlete.skillset,this.props.disciplines);
let worstscore = WorstScore(this.props.athlete.skillset,this.props.disciplines);
let best = discipline.score == bestscore? 'best-color':'';
let worst = discipline.score == worstscore? 'worst-color':''
return best+worst;
}
return (
<div className={ visibilityToggle}>
<section className="l-section c-predictions">
<h2 className="header">Predictions</h2>
<div className='header-flexible'>
<Radio dataRadio={dataRadio} isTeam={this.state.isTeam} fn={this.handleChangeTeam} />
<Form header={ formHeader} TagList={ TagList} fn={ this.handleChangeTag} />
</div>
<div className='header-flexible'>
<button className='button' onClick={ this.handleSortName}>Sort by discipline name</button>
<button className='button' onClick={ this.handleSortScore}>Sort by total score</button>
</div>
<div className="content">
{FiltrowaneDyscypliny.map((discipline) => { return (
<div key={discipline.name} className="c-discipline">
<img src={`${discipline.photo}`} alt={ `${discipline.name}`} onClick={this.handleShowSport} className='sport-icon' />
<div className="c-discipline__content-visible">
<span className={` c-discipline__content-name ${colorToggler(discipline)}`}>
{`${discipline.name} - ${discipline.score}`}
</span>
<span className="c-discipline__content-isIndividual">{`${individualOrTeam(discipline.isIndividual)}`}</span>
<div className='c-discipline__content-Tags'> {discipline.tags.map((tag, index) =>{return(
<span key={index}className="tags">{tag}</span>)})}</div>
</div>
</div>
) })}
</div>
</section>
</div>
)
}
}
Predictions.propTypes = {
athlete: PropTypes.shape({
name: PropTypes.string.isRequired,
photo: PropTypes.string.isRequired,
bio: PropTypes.string.isRequired,
skillset: PropTypes.objectOf(PropTypes.number).isRequired,
nativeDisciplines: PropTypes.arrayOf(PropTypes.string).isRequired,
}).isRequired,
disciplines: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
photo: PropTypes.string.isRequired,
isIndividual: PropTypes.bool.isRequired,
tags: PropTypes.arrayOf(PropTypes.string).isRequired,
requirements: PropTypes.objectOf(PropTypes.number).isRequired,
})).isRequired
}