如何绑定数组的状态？

Question

嘿，我是React的初学者，我需要你的帮助。我有一系列的教堂展示。我可以专注于每一张卡片，当我点击时，这些卡片的样式是紫色的边框阴影。当我点击一张卡片时，我想取消前一张卡片的点击。你能给我带路吗？

我的教会列表：

    const ChurchList = () => {
    const churches = churchDB;
    const classes = useStyles();

    return (
     <div className={classes.root}>
      { churches.map( (church) => (
       <ChurchItem 
         key={ church.name } 
         church={ church }
       />)
      )}
     </div>
      )
     }

我的教堂物品：

     class ChurchItem extends Component {
     constructor(props) {
     super(props);

     this.state= {
      clickedCard: false,
     };
    }

    render() {
     const clickColor = {
     boxShadow: '0 3px 5px 2px purple',
    };

    const IsClicked = () => {
     this.setState({
     clickedCard: !this.state.clickedCard,
    });
   };

return (
  <Card onClick={IsClicked} style={{width: 345, margin: '10px', boxShadow: this.state.clickedCard === true ? clickColor.boxShadow : null}}>
    <CardActionArea>
      <CardMedia
        style={{height: 140}}
        image={this.props.church.image}
        title="church image"
      />
      <div style={{display: 'flex', justifyContent: 'center', minHeight: '60px', marginTop: '10px'}}>
        <Filteringlive church={this.props.church} />
        <FilteringGift church={this.props.church} />
      </div>
      <CardContent>
        <Typography gutterBottom variant="h5" component="h2">
          {this.props.church.name}
        </Typography>
        <Typography variant="body2" color="textSecondary" component="p">
          {this.props.church.adress} <br></br>
          {this.props.church.code} {this.props.church.city}
        </Typography>
      </CardContent>
    </CardActionArea>
    <CardActions>
      <Button size="small" color="primary">
        {this.props.church.type}
      </Button>
    </CardActions>
  </Card>
);

}；}；

Answer 1

试试这段代码吧！你的教会名单

const ChurchList = () => {
     const [activeItem, setActiveItem] = React.useState(null)
     const churches = churchDB;
     const classes = useStyles();
     return (
        <div className={classes.root}>
            { churches.map( (church) => (
            <ChurchItem 
                   key={ church.name } 
                   church={ church }
                   setActiveItem={setActiveItem}
                   activeItem={activeItem}
            />)
            )}
        </div>
      )
 }

你的教堂物品

class ChurchItem extends Component {
     constructor(props) {
     super(props);

     this.state= {
      clickedCard: false,
     };
    }

    render() {
     const clickColor = {
     boxShadow: '0 3px 5px 2px purple',
    };

    const IsClicked = () => {
     this.props.setActiveItem(this.props.church.code)
   };

return (
  <Card onClick={IsClicked} style={{width: 345, margin: '10px', boxShadow: this.props.activeItem === this.props.church.code ? clickColor.boxShadow : null}}>
    <CardActionArea>
      <CardMedia
        style={{height: 140}}
        image={this.props.church.image}
        title="church image"
      />
      <div style={{display: 'flex', justifyContent: 'center', minHeight: '60px', marginTop: '10px'}}>
        <Filteringlive church={this.props.church} />
        <FilteringGift church={this.props.church} />
      </div>
      <CardContent>
        <Typography gutterBottom variant="h5" component="h2">
          {this.props.church.name}
        </Typography>
        <Typography variant="body2" color="textSecondary" component="p">
          {this.props.church.adress} <br></br>
          {this.props.church.code} {this.props.church.city}
        </Typography>
      </CardContent>
    </CardActionArea>
    <CardActions>
      <Button size="small" color="primary">
        {this.props.church.type}
      </Button>
    </CardActions>
  </Card>
);

Answer 2

我不得不简化你的代码，希望这能对你有所帮助。

工作demo

churchList.jsx

import { useState } from "react";
import { ChurchItem } from "./church-item";

export const ChurchList = () => {
  const [selectedCard, setSelectedCard] = useState();

  const churches = [
    { id: 1, title: "church1" },
    { id: 2, title: "church2" }
  ];

  const cardClicked = (id) => setSelectedCard(id);

  return (
    <div>
      {churches.map((church) => (
        <ChurchItem
          key={church.title}
          church={church}
          active={church.id === selectedCard}
          onClick={() => cardClicked(church.id)}
        />
      ))}
    </div>
  );
};

church-item.jsx

import { Component } from "react";

export class ChurchItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const clickColor = {
      boxShadow: "10px 5px 5px red"
    };

    return (
      <div
        onClick={this.props.onClick}
        className="card"
        style={this.props.active ? { ...clickColor } : {}}
      >
        {this.props.church.title}
      </div>
    );
  }
}

我所做的就是从父进程(在本例中为ChurchList )控制活动卡，并将其作为道具传递给子进程(ChurchItem)。有了这个布尔值，您就可以很容易地决定如何更改组件的样式。