我怎样才能保持默认单击 div 的第一个图像元素？答案

【问题标题】：How can i keep the first Image Element of the div to be clicked by default?我怎样才能保持默认单击 div 的第一个图像元素？
【发布时间】：2021-07-08 20:26:18
【问题描述】：

如何保持 div 的第一个元素默认被点击？我在下面给出了一个包含图像的 div，我希望默认单击 div 的第一个图像。我将其用作反应功能组件中的视图

```<div className="tv_tabs" style={{ marginLeft: "110px" }}>
                                {
                                    covidhealthImage && covidhealthImage.map((image, index) => {
                                        return (
                                            <div><img  height="70" width="70" onClick={() => showHeading(index)} src={image} /></div>
                                        );
                                    })
                                }
                            </div>```






  const showHeading = (index) => {
            const heading = healthHeadline[index]
            const headingImage = covidhealthImage[index]
            const captionText = healthCaption[index]
            setNewImage(headingImage)
            setNewCaption(captionText)
            setCurrentHeading(heading)
        }

const [newImage, setNewImage] = useState([]);
    const [newCaption, setNewCaption] = useState([]);
    const [healthHeadline, setHealthHeadline] = useState([])
    const [currentHeading, setCurrentHeading] = useState('')

【问题讨论】：

你看错了。您希望您的状态反映点击所做的任何事情。我们不知道 showHeading() 在您的州实际上做了什么
@charlietfl 你现在可以检查一下吗，我已经添加了更多详细信息。
所以基本上你想要什么。如果我理解正确，就是将各种 useStates 的默认值设置为调用showHeading(0) 时设置的值

标签： javascript html reactjs react-hooks

【解决方案1】：

默认点击的是不同的css？如果是，您可以使用来自 css 的伪类 :first-child

https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

【讨论】：

【解决方案2】：

您可能必须尝试使用 ref 自行触发事件

前-

simulateClick(e) {
    e.click();

  }
....
<div className="tv_tabs" style={{ marginLeft: "110px" }}>
   {covidHealthImage && covidhealthImage.map((image, index) => {
       return (
            <div ref={this.simulateClick} ><img  height="70" width="70" onClick={() => showHeading(index)} src={image} /></div>
          );
       })
    }
 </div>

【讨论】：

【解决方案3】：

这里是一个 hack，只使用三元运算符，只在非 0 索引值上排除 onclick 方法



const [newImage, setNewImage] = useState([]);
const [newCaption, setNewCaption] = useState([]);
const [healthHeadline, setHealthHeadline] = useState([])
const [currentHeading, setCurrentHeading] = useState('')


const showHeading = (index) => {
    const heading = healthHeadline[index]
    const headingImage = covidhealthImage[index]
    const captionText = healthCaption[index]
    setNewImage(headingImage)
    setNewCaption(captionText)
    setCurrentHeading(heading)
}

<div className="tv_tabs" style={{ marginLeft: "110px" }}>
{
    covidhealthImage && covidhealthImage.map((image, index) => {
        return (
            index == 0 ? (
                <div><img  height="70" width="70" onClick={() => showHeading(index)} src={image} /></div>
            ) : (
                <div><img  height="70" width="70" src={image} /></div>
            )
        );
    })
}
</div>

【讨论】：

试过这个但是不行，它使其他索引无法点击，这不是我需要的吗？
@Demogorgon i want the first image of the div to be clicked by default 但是我提供的代码是做什么的