javascript - 如何在 React 中默认显示图像

Question

我有多个图像和 onClick 将显示在另一个 div 中这在 React 中工作正常但现在我想在另一个 div 中默认显示第一个图像，我该怎么做？

我的代码：

render() {

    const imageClick = (selectedImg) => {
      this.setState({ selectedImg })
    }
    return (

      <div>

        <img src="images/1.png" onClick={() => imageClick(1)} />
        <img src="images/2.png" onClick={() => imageClick(2)} />
        <img src="images/1.png" onClick={() => imageClick(1)} />
        <img src="images/2.png" onClick={() => imageClick(2)} />

        <div className="newDiv">
          <img src={`images/${this.state.selectedImg}.png`} /> // Get the selected image from this.state
</div>

      </div>
    )
  }

标签： javascriptreactjs

Answer 1

您需要将图像的初始状态设置为1. 默认情况下，会将第一张图片加载到 div

state = {
  selectedImg:1
}