您好，我的问题是有一种方法可以在不创建许多变量的情况下将许多对象保持在反应状态。例如，我有一个包含产品的目录，我有 (onMouseEnter, onMouseLeave) 和一些逻辑，用于采用不同的 css 样式来实现淡入淡出效果，而其他逻辑则在布尔条件下使用一个变量保持在状态。当我需要 5 时，问题就来了.. 10.. 100.. 产品我需要为每个对象有很多变量。如果有人能说出什么方法是合适的。先感谢您。
import React from 'react';
import { Col, Row, Container } from 'react-bootstrap';
import Card from "react-bootstrap/Card";
import CardBody from "reactstrap/es/CardBody";
import CardTitle from "reactstrap/es/CardTitle";
import CardImg from "react-bootstrap/CardImg";
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { keyframes } from "styled-components";
import style from './Catalogue1.css';
class Catalogue extends React.Component {
constructor(props) {
super(props);
this.state = { <-- here i need many state var's
dropdownOpen: false,
visible: false,
visible1: false,
cardOn: false,
cardOn1: false
}
}
componentDidMount() {
}
enterMouse = e => { <-- need 4 functions
for just two objects
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen,
visible: true,
cardOn: true
}));
}
leaveMouse = e => {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen,
visible: false,
cardOn: false
}));
}
enterMouse1 = e => {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen,
visible1: true,
cardOn1: true
}));
}
leaveMouse1 = e => {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen,
visible1: false,
cardOn1: false
}));
}
render() {
const { filteredItems } = this.state;
return (
<Container className={style.container}>
<Row>
<Col>
<div className={style.div1}>
<Card className={this.state.cardOn ? style.cardOn : style.cardOff} style={{ width: '13rem'}} onMouseEnter={this.enterMouse} onMouseLeave={this.leaveMouse}>
<CardImg variant="top" src="https://i.ibb.co/MDHYTJy/11482459963422.jpg" />
<CardBody className={style.cardText}>
<CardTitle>Смартфон GSM XIAOMI MI 8 LITE</CardTitle>
<div className={this.state.visible? style.fadeIn : style.fadeDefaultState} style={{ width: '13rem'}}>
<p>
* foo <br />
* bar
</p>
</div>
</CardBody>
</Card>
<Card className={this.state.cardOn1 ? style.cardOn1 : style.cardOff1} style={{ width: '13rem'}} onMouseEnter={this.enterMouse1} onMouseLeave={this.leaveMouse1}>
<CardImg variant="top" src="https://i.ibb.co/MDHYTJy/11482459963422.jpg" />
<CardBody className={style.cardText}>
<CardTitle>Смартфон GSM XIAOMI MI 8 LITE</CardTitle>
<div className={this.state.visible1? style.fadeIn : style.fadeDefaultState} style={{ width: '13rem'}}>
<p>
* foo <br />
* bar
</p>
</div>
</CardBody>
</Card>
</div>
</Col>
</Row>
</Container>
);
}
}
export default Catalogue
是的，保存数组值而不是为您的对象定义单个键是有意义的。我看到你正在尝试用卡片做一些事情，所以这应该特别相关。
考虑以下代码：
class Catalogue extends React.Component{
constructor(props) {
super(props);
this.state = {
dropdownOpen: false,
cards: [{id: 1, name: "Jack", visible: false}, {id: 2, name: "Queen", visible: false}]
}
}
toggleCard = (cardId) => {
const cards = this.state.cards
//flip card, update state
const updatedCards = cards.map((card, index, array) => {
if(card.id == cardId){
return {
...card,
visible: !array[index].visible
}
} else {
return {
...card
}
}
})
this.setState({
cards: updatedCards
})
}
render(){
const cards = this.state.cards
return(
cards.map((card) => {
return <div onClick={() => this.toggleCard(card.id)}>{card.name}</div>
})
)
}
}
因此，拥有这样的东西可以让您将所有卡片集中在一个组件中。这完全取决于您如何设置卡片阵列，拥有 ID 会让您的生活变得更加轻松。然后您需要计划您的事件处理程序如何通过使用这些 id 来更新所需的卡片
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句