Реагируйте на добавление класса тега img

Question

Я использую React.У меня есть список изображений:

<div className="Images-gridWrapper">
    {this.props.images.map((item, index) => {
        return (
            <div className="Images-gridItem" data-id={index} key={index}>
                <img className="Images-gridImage" src={item.img.w1200}
                    onLoad={(e)=>{
                        // HERE
                    }}
                />
            </div>
        );
    })}
</div>

Я ищу способ добавить класс к каждому тегу img при загрузке его изображения.Я полагаю, что функция onLoad является правильным способом, но как?

Answer 1

Вы можете создать новый компонент Img, который имеет переменную состояния, которую вы установили на true, когда изображение было загружено.Затем вы можете использовать эту переменную состояния, чтобы добавить дополнительный класс к элементу img.

Пример

class App extends React.Component {
  render() {
    return (
      <div className="Images-gridWrapper">
        {this.props.images.map((item, index) => {
          return (
            <div className="Images-gridItem" data-id={index} key={index}>
              <Img src={item} />
            </div>
          );
        })}
      </div>
    );
  }
}

class Img extends React.Component {
  state = { loaded: false };

  onLoad = () => {
    this.setState({ loaded: true });
    console.log("Loaded!");
  };

  render() {
    const { loaded } = this.state;

    return (
      <img
        className={"Images-gridImage" + (loaded ? " Images-gridImage-loaded" : "")}
        src={this.props.src}
        onLoad={this.onLoad}
      />
    );
  }
}

ReactDOM.render(
  <App
    images={[
      "http://placekitten.com/100/100",
      "http://placekitten.com/100/200"
    ]}
  />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>