时间戳

首页 > 解决方案 > 将不存在的布尔值推送到状态并跨组件共享

javascript - 将不存在的布尔值推送到状态并跨组件共享

问题描述

我正在尝试这样做，以便用户可以单击ArtImage呈现 div 的 a - 一旦这样做，它应该将 的值添加selected到选定images状态并显示选定的总数images，同时还input type="radio"用于触发图像的点击. 有没有办法在组件之间共享这种状态，同时更新这些值？

数据

const images = [
    {
        imageUrl: "https://picsum.photos/id/1003/300/300"
    },
    {
        imageUrl: "https://picsum.photos/id/1005/300/300"
    },
    {
        imageUrl: "https://picsum.photos/id/1009/300/300"
    },
    {
        imageUrl: "https://picsum.photos/id/1010/300/300"
    },
    {
        imageUrl: "https://picsum.photos/id/1015/300/300"
    },
    {
        imageUrl: "https://picsum.photos/id/1025/300/300"
    },
    {
        imageUrl: "https://picsum.photos/id/1027/300/300"
    },
    ...
];

const ArtImage = ({ image, currentImage }) => {
    const [selected, setSelected] = React.useState(false);

    const handleSelect = () => {
        setSelected(!selected);
    };

    return (
        <div
            onClick={handleSelect}
            style={{
                display: "inline-block",
                position: "relative",
                cursor: "pointer"
            }}
        >
            <input type="radio" checked={selected} />
            <img src={image.imageUrl} />
        </div>
    );
};

const ArtSelection = ({ art }) => {
    const [images, setImages] = React.useState(art);

    return (
        <div>
            <p>{images.selected}/12 posts selected</p>
            {images.map((e, i) => {
                return <ArtImage image={e} />;
            })}
        </div>
    );
};

代码笔： https ://codepen.io/adam-ginther/pen/PopwNag ?editors=0110

标签： javascriptarraysreactjsuse-state

解决方案

您可以创建图像计数状态并将其传递给子组件。

 const ArtSelection = ({ art = [] }) => { //default the art props to an array to prevent error while rendering
        const [images, setImages] = React.useState(art);
        const [ imageCount, setImageCount ] = React.useState(0);
    
        return (
            <div>
                <p>{imageCount}/ {images.length} posts selected</p>
                {images.map((e, i) => {
                    return <ArtImage image={e} updateImageCount={setImageCount} />;
                })}
                <p>Total Selected: {imageCount} </p>
            </div>
        );
    };

然后在子组件中，使用 useEffect 来更新计数器。

const ArtImage = ({ image, currentImage, updateImageCount }) => {
    const [selected, setSelected] = React.useState(false);

    useEffect(() => {
      if (selected) {
         updateImageCount(prev => prev+1)
      } else {
         updateImageCount(prev => prev-1) 
      }

    },[selected])
    const handleSelect = () => {
        setSelected(!selected);
       
    
    };

    return (
        <div
            onClick={handleSelect}
            style={{
                display: "inline-block",
                position: "relative",
                cursor: "pointer"
            }}
        >
            <input type="radio" checked={selected} />
            <img src={image.imageUrl} />
        </div>
    );
};

推荐阅读