Question

每当单击子组件中的特定按钮时，我就有一个要在父组件中运行的功能。我正在使用反应挂钩进行状态管理。

单击的按钮是子组件中的最后一个，而我尝试从父组件中调用的函数是onClickHandling。

父组件：

const SearchPage = () => {
  const [searchText, setSearchTerm] = useState('');
  const [image, setImage] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [isNext, setIsNext] = useState(false);
  const [nextPageIndex, setNextPageIndex] = useState(1);
  const [isHidden, setIsHidden] = useState(true);

  const onInputChange = (e) => {
    setSearchTerm(e.target.value);
  };

  const getImages = () => {
    fetchImages(nextPageIndex, searchText)
      .then((data) => {
        setImage(data.data.results);
        setIsLoaded(false);
      });
  };

  const onSubmitHandler = (e) => {
    setImage([]);
    e.preventDefault();
    setNextPageIndex(1);
    getImages();
    setIsLoaded(true);
    setIsHidden(false);
  };

  const onClickHandling = () => {
    setIsNext(true);
    setNextPageIndex(parseInt(nextPageIndex + 1, 10));
  };

  if (isNext === true) {
    fetchImages(nextPageIndex, searchText)
      .then((data) => {
        const result = data.data.results;
        setImage(image.concat(result));
        setIsLoaded(false);
      });
    setIsNext(false);
  }

  return (
    <React.Fragment>
      <SearchBar
        className="search-bar"
        onSubmitHandler={onSubmitHandler}
        onInputChange={onInputChange}
        searchText={searchText}
      />

      <div className="image-container">
        {image && (
        <ImageList
          image={image}
          isLoaded={isLoaded}
          isHidden={isHidden}
          onClickHandler={onClickHandling}
        />
        )}
      </div>

    </React.Fragment>

  );
};

export default SearchPage;

子组件：

const ImageList = ({
  image, isLoaded, isHidden, onClickHandling,
}) => {
  const [imageIndex, setImageIndex] = useState();
  const [isOpen, setIsOpen] = useState('false');

  if (isLoaded) {
    return (
      <div className="spinner">
        <ReactLoading type="spin" color="blue" />
      </div>
    );
  }

  const onClickHandler = (e) => {
    setIsOpen(true);
    setImageIndex(parseInt((e.target.id), 10));
  };

  const imgs = image.map((img, index) => (
    <img
      id={index}
      key={img.id}
      src={img.urls.small}
      onClick={onClickHandler}
    />
  ));

  if (imgs.length === 0) {
    return (
      <p>No images</p>
    );
  }

  if (isOpen === true) {
    return (
      <Lightbox
        onCloseRequest={() => setIsOpen(false)}
        mainSrc={image[imageIndex].urls.regular}
        onMoveNextRequest={() => setImageIndex((imageIndex + 1) % image.length)}
        onMovePrevRequest={() => setImageIndex((imageIndex + image.length - 1) % image.length)}
        nextSrc={image[(imageIndex + 1) % image.length].urls.regular}
        prevSrc={image[(imageIndex + image.length - 1) % image.length].urls.regular}
        imageTitle={image[imageIndex].alt_description}
        imageCaption={`By ${image[imageIndex].user.name}`}

      />
    );
  }

  return (
    <React.Fragment>
      {imgs}
      {!isHidden && <Button onClick={onClickHandling}>Click me</Button> }
    </React.Fragment>
  );
};

export default ImageList;

Answer 1

名称中有一个错字，用于将功能prop从父组件传递到子组件。

IsolationForest

在子组件反应挂钩中单击按钮时，如何使用父组件中的功能？

1 个答案: