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

Question

我正在努力做到这一点，以便用户可以单击呈现 div 的 ArtImage - 一旦它这样做，它应该将 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

Answer 1

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

 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>
    );
};

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

Push a non-existing boolean value to state and share across components

javascript

arrays

reactjs

use-state