如何使用按钮映射 React JS？

Question

目前我正在尝试创建一个反应应用程序。我有 3 个按钮，我想根据选择的按钮显示不同的信息和图像。它只会显示所选按钮的信息，例如，如果用户单击 de'spa，它将仅显示有关 id 1 的信息。

如何在反应中映射它们中的每一个？还有一个问题。我可以直接在数组中写我的img的路径吗？如果不能，怎么办？

这是我当前的代码

import {Carousel, Container, Row, Col} from 'react-bootstrap'
import '../CSS/Facilities.css'

const facsInfo = [
    {
        Id: "1",
        Title: "De'Spa",
        Description: "",
        upperleftimg:"./Images/photo1.png",
        upperrightimg:"./Images/photo2.png",
    },
    {
        Id: "2",
        Title: "De'Resto",
        Description: "",
        upperleftimg:"./Images/photo3.png",
        upperrightimg:"./Images/photo4.png",
    },
]

const Facilities = () => {
    return (
        <>
            <Container fluid>
                <Row className="facsbuttwrapper text-center">
                    <Col sm={4} lg={4}>
                        <button className="facsButton">De'Spa</button>
                    </Col>

                    <Col sm={4} lg={4}>
                        <button className="facsButton">De'Resto</button>
                    </Col>

                    <Col sm={4} lg={4}>
                        <button className="facsButton">Meeting Room</button>
                    </Col>
                </Row>
            </Container>

            <Container fluid>
                <Row className="text-center">
                    <Col md={12} lg={12}>
                        {facsInfo.map((show) =>{
                            const {Title, Description, OpeningHours, Id} = show
                            return(
                                <div key={Id}>
                                    <h1>{Title}</h1>
                                    <h5>{Description}</h5>
                                </div>
                            )
                        })}
                    </Col>
                </Row>
            </Container>

            <Container fluid>
                <Row>
                    <Col md={12} lg={12}>
                        {facsInfo.map((show) =>{
                            const {upperleftimg, upperrightimg, Id} = show
                            return(
                                <div key={Id} className="FacilitiesImg">
                                    <img src={upperleftimg} alt="Image 1"></img>
                                    <img src={upperrightimg} alt="Image 2"></img>
                                </div>
                            )
                        })}
                    </Col>
                </Row>
            </Container>
        </>
    )
}

export default Facilities

Answer 1

还有一个问题。我可以直接在数组中写我的img的路径吗？如果不能，怎么办？

是的，你可以。

为了实现你的目标，你需要定义一个state：

  const [currentId, setCurrentId] = useState();

还有一个过滤 facs 的函数：

  const showSelectedFact = () => {
    var fac = facsInfo.filter((x) => x.Id == currentId)[0];
    const { Title, Description, OpeningHours, Id } = fac;
    return (
      <div key={Id}>
        <h1>{Title}</h1>
        <h5>{Description}</h5>
      </div>
    );
  };

代码如下：

import { Carousel, Container, Row, Col } from "react-bootstrap";
import { useEffect, useState } from "react";
// import '../CSS/Facilities.css'

const facsInfo = [
  {
    Id: "1",
    Title: "De'Spa",
    Description: "",
    upperleftimg: "./Images/photo1.png",
    upperrightimg: "./Images/photo2.png"
  },
  {
    Id: "2",
    Title: "De'Resto",
    Description: "",
    upperleftimg: "./Images/photo3.png",
    upperrightimg: "./Images/photo4.png"
  },
  {
    Id: "3",
    Title: "Meeting Room",
    Description: "",
    upperleftimg: "./Images/photo3.png",
    upperrightimg: "./Images/photo4.png"
  }
];

const Facilities = () => {
  const [currentId, setCurrentId] = useState();

  useEffect(() => {
    console.log(currentId);
  }, [currentId]);

  const showSelectedFact = () => {
    var fac = facsInfo.filter((x) => x.Id == currentId)[0];
    const { Title, Description, OpeningHours, Id } = fac;
    return (
      <div key={Id}>
        <h1>{Title}</h1>
        <h5>{Description}</h5>
      </div>
    );
  };

  return (
    <>
      <Container fluid>
        <Row className="facsbuttwrapper text-center">
          <Col sm={4} lg={4}>
            <button
              value="1"
              className="facsButton"
              onClick={(e) => setCurrentId(e.target.value)}
            >
              De'Spa
            </button>
          </Col>

          <Col sm={4} lg={4}>
            <button
              value="2"
              className="facsButton"
              onClick={(e) => setCurrentId(e.target.value)}
            >
              De'Resto
            </button>
          </Col>

          <Col sm={4} lg={4}>
            <button
              value="3"
              className="facsButton"
              onClick={(e) => setCurrentId(e.target.value)}
            >
              Meeting Room
            </button>
          </Col>
        </Row>
      </Container>

      <Container fluid>
        <Row className="text-center">
          <Col md={12} lg={12}>
            {showSelectedFact()}
          </Col>
        </Row>
      </Container>

      <Container fluid>
        <Row>
          <Col md={12} lg={12}>
            {facsInfo.map((show) => {
              const { upperleftimg, upperrightimg, Id } = show;
              return (
                <div key={Id} className="FacilitiesImg">
                  <img src={upperleftimg} alt="Image 1"></img>
                  <img src={upperrightimg} alt="Image 2"></img>
                </div>
              );
            })}
          </Col>
        </Row>
      </Container>
    </>
  );
};

export default function App() {
  return <Facilities />;
}

Answer 2

1. 您需要一个状态来保存信息。
2. 根据当前信息状态过滤 facsInfo

const [current, setCurrent] = React.useState(`De'Spa`)

const handleInfoChange = (evt) => {
  setCurrent(evt.currentTarget.dataset.info)
}

const filteredFacsInfo = facsInfo.filter(x => x.Title === current)

return (
  <Container fluid>
    <Row className="facsbuttwrapper text-center">
      <Col sm={4} lg={4}>
        <button data-info="De'Spa" className="facsButton" onClick={handleInfoChange}>De'Spa</button>
      </Col>
      <Col sm={4} lg={4}>
        <button data-info="De'Resto" className="facsButton" onClick={handleInfoChange}>De'Resto</button>
      </Col>
      <Col sm={4} lg={4}>
        <button data-info="Meeting Room" className="facsButton" onClick={handleInfoChange}>Meeting Room</button>
      </Col>
    </Row>
  </Container>

  <Container fluid>
    <Row className="text-center">
      <Col md={12} lg={12}>
        {filteredFacsInfo.map((show) => /* your render content about info */)}
      </Col>
    </Row>
  </Container>

  <Container fluid>
    <Row className="text-center">
      <Col md={12} lg={12}>
        {filteredFacsInfo.map((show) => /* your render content about image */)}
      </Col>
    </Row>
  </Container>
)

Answer 3

你可以使用状态来做到这一点

在您的Facilities 组件中：

const [id, setID] = useState('');

然后在您的按钮中：

<Row className="facsbuttwrapper text-center">
  {facsInfo.map(fac => (
    <Col sm={4} lg={4}>
      <button className="facsButton" onClick={() => setId(fac.Id)}>
        {fac.Title}
      </button>
    </Col>
  ))}
  <Col sm={4} lg={4}>
    <button className="facsButton">Meeting Room</button>
  </Col>
</Row>;

要显示正确的图像：

<Row>
  <Col md={12} lg={12}>
    {facsInfo.find(show => {
      if (show.id === id) {
        const { upperleftimg, upperrightimg, Id } = show;
        return (
          <div key={Id} className="FacilitiesImg">
            <img src={upperleftimg} alt="Image 1"></img>
            <img src={upperrightimg} alt="Image 2"></img>
          </div>
        );
      }
    })}
  </Col>
</Row>;

Answer 4

1. 在您的按钮上添加 onClick 事件并将 ID 传递给点击处理程序。
2. 使用选定的 id 设置状态。
3. 不要使用 facsInfo.map，而是使用 facsInfo.find(f => f.id === selectedID) [selectedID 是状态]。