useState 후크는 예상되는 구성 요소뿐만 아니라 모든 구성 요소의 상태를 변경합니다.

Question

저는 React를 사용하고 있습니다. 클릭한 이미지의 스타일을 변경하려고 합니다. 하지만 이 함수를 사용하면 모든 요소에 상태가 적용됩니다. onClick 이벤트가 사진에 적용됩니다. 하나를 클릭하면 다른 이미지의 테두리 색상이 #a2a0ff로 변경됩니다. 클릭한 이미지에만 #4D4AFF 색상이 있어야 합니다.

으아아아

Answer 1

라는 이름의 이벤트가 ImgStyle的变量，它应用于所有图像的样式，并且其值设置为所有onclick 하나만 있으므로 스타일은 항상 동일합니다.

이 방법을 사용하려면 각 이미지마다 하나씩 5개의 개별 상태 변수가 필요합니다. 하지만 실제로는 최대 하나의 이미지(방금 클릭한 이미지)에만 테두리를 표시하려고 한다고 가정합니다. 이 경우 별도의 상태 변수가 전혀 필요하지 않습니다. 현재 imageHref 및 이미지의 실제 href를 기준으로 스타일을 계산하세요.

으아아아

그런 다음 각 이미지에 적용합니다(아래에는 예만 표시되어 있지만 다른 이미지에 적용하는 방법은 분명해야 합니다).

으아아아

href字符串数组，并通过map函数遍历生成每个img 태그를 생성하여 이 프로세스를 더욱 단순화할 수도 있습니다.