Как я могу поднять состояние и при этом иметь возможность, чтобы родительский компонент сообщал элементам дочернего компонента, должны ли они быть видимыми?
Мне посоветовали, чтобы мой <List /> обрабатывал свое собственное состояние для каждого <li />
class HeroList extends Component {
state = {
show: false
};
handleShow = () => {
this.setState({ show: true });
};
getColor = () => {
if (this.state.show) {
if (this.props.isCorrect) {
return "green";
} else {
return "red";
}
}
return "";
};
render() {
console.log('rendered list again')
const { name, color } = this.props;
const { show } = this.state;
return (
<li onClick={this.handleShow} className={this.getColor()}>
{name}
<span className={show ? "show" : "hide"}>{color}</span>
</li>
);
}
}
Однако, когда я вызываю свой метод shuffle из родительского компонента, даже если компонент <List/> проходит через новый рендер , его состояние не возвращается в исходное состояние: то есть show:false остается как show:true
export default class Heroes extends Component {
state = {
heroes: [
{ name: "Aquaman", color: "orange", id: 1 },
{ name: "Batman", color: "black", id: 2 },
{ name: "Green Lantern", color: "green", id: 3 },
{ name: "SuperMan", color: "blue", id: 4 },
{ name: "SpiderMan", color: "red", id: 5 }
]
};
/****** SHUFFLE METHOD ******/
handleShuffle = () => {
this.setState({
heroes: [...this.state.heroes.sort(() => Math.random() - 0.5)]
});
};
render() {
const { heroes } = this.state;
const correctIndex = Math.floor(Math.random() * (heroes.length - 1));
const correctHero = heroes[correctIndex];
const hero = heroes.map(hero => (
<HeroList
key={hero.id}
name={hero.name}
color={hero.color}
isCorrect={correctHero.color === hero.color}
/>
));
return (
<>
<h6>React Controlled Components</h6>
<Question key={correctHero.id} color={correctHero.color} />
<button onClick={this.handleShuffle}>shuffle heroes</button>
<ul>{hero}</ul>
</>
);
}
}
// Question
const Question = ({ color }) => <h2>What Hero wears {color}</h2>;
Затем мне посоветовали поднять состояние до родительского компонента и передать состояние вниз как опору, но затем я ударил блокиратор, где, когда show: true для одного <li /> становится истинным для всех их самого первое onClick событие.
Вопрос: Как я могу поднять состояние, но при этом контролировать каждый <li/> для индивидуального изменения onClick?
Вы можете увидеть проблему в действии здесь, пожалуйста, не стесняйтесь ее раскошелиться => код песочница