Javascript 在React中选择图像和显示标题

我有一个React功能组件，它有一个带有标题的图像列表：

export function MyComponent() {
  const images = [
    { image: "http://www.example1.com/image1.jpg", title: "Title 1"},
    { image: "http://www.example2.com/image2.jpg", title: "Title 2"},
    { image: "http://www.example3.com/image3.jpg", title: "Title 3"}
  ]

  const [titles, setTitles] = React.useState([]);

  return (
    <div>

      <div>{titles}</div>

      <section className="images">{
        images.map(image => (
          <img
            src={image.image}
            alt={image.title}
            onClick={() => {}} // selects or unselects the image?
          />
          )
        )}</section>
    </div>
  );
}

导出函数MyComponent（）{
常量图像=[
{图像：http://www.example1.com/image1.jpg，标题：“标题1”}，
{图像：http://www.example2.com/image2.jpg，标题：“标题2”}，
{图像：http://www.example3.com/image3.jpg，标题：“标题3”}
]
const[titles，setTitles]=React.useState（[]）；
返回(
{titles}
{
images.map（image=>(
{}//选择还是取消选择图像？
/>
)
)}
);
}

当我点击一个图像时，我希望它被选中或取消选中。当它被选中时，我希望出现一个CSS边框。如果选择了图像，我希望所选图像标题列表显示在

{titles}

中。我想在这里使用

React.useState（）

，但我不知道怎么做。我不想为了使用类而重构；它必须是一个功能组件。谢谢。

导出函数MyComponent（）{
export function MyComponent() {
  const images = [
    {
      image: 'http://www.example1.com/image1.jpg',
      title: 'Title 1',
    },
    {
      image: 'http://www.example2.com/image2.jpg',
      title: 'Title 2',
    },
    {
      image: 'http://www.example3.com/image3.jpg',
      title: 'Title 3',
    },
  ];

  const [titles, setTitles] = React.useState([]);

  return (
    <div>
      <div>{titles}</div>

      <section className="images">
        {images.map((image) => (
          <img
            style={{
              border: titles.includes(image.title) ? '3px solid black' : 'none',
            }}
            src={image.image}
            alt={image.title}
            onClick={() => {
              if (titles.includes(image.title)) {
                setTitles(titles.filter((title) => title !== image.title));
              } else setTitles([...titles, image.title]);
            }}
          />
        ))}
      </section>
    </div>
  );
}

常量图像=[
{
图像：'http://www.example1.com/image1.jpg',
标题：“标题1”，
},
{
图像：'http://www.example2.com/image2.jpg',
标题：“标题2”，
},
{
图像：'http://www.example3.com/image3.jpg',
标题：“标题3”，
},
];
const[titles，setTitles]=React.useState（[]）；
返回(
{titles}
{images.map（（图像）=>(
{
if（标题.包括（图像.标题））{
setTitles（titles.filter（（title）=>title！==image.title））；
}else设置标题（[…标题，image.title]）；
}}
/>
))}
);
}

我假设您希望一次选择一个图像并显示其标题。所以，这里有一个幼稚的方法，你可以根据自己的情况进行调整

const图像=[
{图像：https://via.placeholder.com/150，标题：“标题1”}，
{图像：https://via.placeholder.com/150，标题：“标题2”}，
{图像：https://via.placeholder.com/150，标题：“标题3”}，
];
函数Main（）{
const[selected，setSelected]=React.useState（）；
返回(
{images[selected]&&images[selected].title}
{images.map（（图像，索引）=>(
（索引）}
/>
))}
);
}
render（，document.getElementById（“根”））
。已选定{
边框：5px纯黑；
}