Состояние, влияющее на все элементы с одинаковым именем
Я пытаюсь изменить класс элемента с помощью обработчика событий onClick. Когда нажимается div, class изменяется, что приводит к изменению некоторых css. Когда я добавляю еще один div, он принимает то же состояние, что и первый div.
class Content extends React.Component {
constructor(props) {
super(props);
this.startGambling = this.startGambling.bind(this);
this.toggleClass = this.toggleClass.bind(this);
this.state = {
prize: '',
tries: 0,
isFlipped: false
};
}
toggleClass() {
this.setState({ isFlipped: true });
};
render() {
return (
<div className = "card-box" style = {divStyle}>
<div class = "flip-card-inner" className = {this.state.isFlipped ? 'flipped' : null} onClick = {this.toggleClass}></div>
</div>
);
}
}
Да, это так. Вероятно, вам следует хранить состояние на основе уникального идентификатора, который вы даете каждому div.
Под добавлением еще одного div я имею в виду копирование и вставку одного и того же div во второй раз.
В вашем коде JSX не совпадают теги и отсутствует закрывающая фигурная скобка.
Отредактировано для добавления закрывающей скобки/элемента - подтвердите, что изменение соответствует назначению.
Ответы 2
Состояние не ограничено html-элементом. Это состояние текущего Компонента.
Реализуйте компонент FlipCard и обработайте его перевернутое состояние внутри этого компонента.
class FlipCard extends React.Component {
state = {
isFlipped: false
}
toggle = () => {
this.setState(prevState => ({
isFlipped: !prevState.isFlipped
}))
}
render(){
const { isFlipped } = this.state;
return (
<div
onClick = {this.toggle}
className = {isFlipped ? 'flipped' : ''}>
Card
</div>
)
}
}
const CardBox = () => (
<article>
<FlipCard />
<FlipCard />
</article>
);
ReactDOM.render(<CardBox />, document.getElementById('root'))div {
cursor: pointer;
}
div.flipped {
background: red;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id = "root"></div>Это другой подход, чем ответ @gazdagergo, но логика та же. Вам нужно где-то отслеживать состояние переключения. Если вам больше нигде не нужно это переключаемое состояние, вы можете сохранить его в отдельных компонентах, как показал @gazdagergo. Но, например, если вам нужно знать, сколько элементов переключается (просто пример), вы можете сохранить состояние в родительском компоненте, чтобы поделиться этой информацией с другим компонентом.
const cards = [
{ id: 1, name: "foo" },
{ id: 2, name: "bar" },
{ id: 3, name: "baz" }
];
const Card = ({ card, toggleClass, isFlipped }) => {
const handleClick = () => toggleClass(card.id);
return (
<div onClick = {handleClick} className = {isFlipped[card.id] ? "flipped" : ""}>
{card.name}
</div>
);
};
class Content extends React.Component {
constructor(props) {
super(props);
this.toggleClass = this.toggleClass.bind(this);
this.state = {
prize: "",
tries: 0,
isFlipped: {}
};
}
toggleClass(id) {
this.setState(state => ({
isFlipped: { ...state.isFlipped, [id]: !state.isFlipped[id] }
}));
}
render() {
return (
<div>
{cards.map(card => (
<Card
key = {card.id}
card = {card}
toggleClass = {this.toggleClass}
isFlipped = {this.state.isFlipped}
/>
))}
</div>
);
}
}
ReactDOM.render(<Content />, document.getElementById("root"));.flipped {
background: red;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id = "root" />В примере я предположил, что элементы карты имеют уникальный идентификатор, но вы можете сделать это и с индексами. Ваше состояние isFlipped больше не логическое, это объект и сохраняет перевернутые идентификаторы.
Как вы «добавляете еще один div»?