Question

我只是在学习React，所以我决定尝试构建Hero数据库，但是遇到了问题。

当我单击任何一个英雄时，带有有关英雄的数据的生物状态和显示状态更新以及模态窗口会弹出，其中包含有关他的更多信息。但是我不知道如何关闭它。我将Modal作为单独的组件，当我尝试从子组件调用函数（updateDisplay）时。应该将显示状态设置为False才行：/

Heroes.js

import React, { useState } from "react";
import Hero from "./Hero";
import styled from "styled-components";

function Heroes(props) {
  const [Bio, setBio] = useState([]);
  const [Display, setDisplay] = useState(false);

  const SingleHeroCont = styled.div`
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    padding: 10px;
    align-items: center;
  `;

  const content = props.data.map((Hero) => (
    <SingleHeroCont
      onClick={() => {
        setBio(Hero);
        setDisplay(true);
      }}
      key={Hero.id}
    >
      <h1>{Hero.name}</h1>
      <img src={Hero.images.sm} alt="Sorry guys"></img>
    </SingleHeroCont>
  ));

  const updateDisplay = () => {
    setDisplay(false);
  };

  return (
    <div className="heroes_cont">
      <Hero updateDisplay={updateDisplay} Display={Display} BioData={Bio} />
      {content}
    </div>
  );
}

export default Heroes;

Hero.js

import React from "react";
import styled from "styled-components";

function Hero({ Display, updateDisplay, BioData }) {
  const HeroAbsolute = styled.div`
    display: ${(props) => (props.showBio ? "block" : "none")};
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 255, 255, 0.5);
  `;


  return (
    <HeroAbsolute showBio={Display}>
      <div className="hero_bio_cont">
        <h1>{BioData.name}</h1>
        <button onClick={() => updateDisplay}>Close</button>
        <div className="hero_bio_appearance">
          <div>
            <img></img>
            <div>
              <h2>{BioData.powerstats?.power}</h2>
              <h2></h2>
              <h2></h2>
            </div>
          </div>
        </div>
      </div>
    </HeroAbsolute>
  );
}

export default Hero;

Answer 1

<button onClick={() => updateDisplay}>Close</button>

如我所见，上面的代码无法调用updateDisplay函数。

正确用法是

<button onClick={() => updateDisplay()}>Close</button>

或

<button onClick={updateDisplay}>Close</button>

对于第二种情况，请参阅箭头功能教程。

反应钩子-通过功能从子级设置父级状态

1 个答案: