@ironmansl

Как сделать чтобы вместо цифр отображалось соответствующее цифре изображение при нажатии на кнопки?

На данный момент у меня есть две кнопки, кнопка prev уменьшает число на 1, а кнопка next увеличивает на 1.
Мне нужно как-то сделать чтобы вместо числа справа от кнопок, или где-нибудь на странице отображались изображения которые у меня находятся в массиве:
изображение банан = числу 1
арбуз = числу 2
клубника = числу 3

Тоесть как должно быть:

На страничке есть кнопки и справа картинка банан так в state я задал значение 1 а цифре один соотвествует число 1, когда я нажал кнопку next отобразился арбуз(цифра 2), нажал еще next отобразилась клубника и так по кругу. Если число будет больше 3 отображается картинка под числом 1, а если будет меньше 1 то под числом 3.
Что нужно добавить/изменить в моем коде чтобы такое реализовать?
P.S. Может лучше было добавить изображения в state а не в переменную items?

Вот мой исходный код:

const items = [
    { img: "https://pbs.twimg.com/profile_images/3117087049/697e0334a13361c6ab68ce00aefefa4f.jpeg" },
    { img: "http://vkclub.su/_data/gifts/134.jpg" },
    { img: "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTBIqdLHvhxu4LAxudRrH2OoJSctYh9pw3NyziKUwbpp77tsOvu" }
];

class App extends React.Component {
  state = {
    image: 1,
  }

  plus = () => {
    this.setState({
      image: this.state.image + 1,
    });
  }
  
  minus = () => {
      this.setState({
      image: this.state.image - 1,
    });
  }
  
  render() {
    return (
      <div><button onClick={this.minus}>Prev</button>
        <button onClick={this.plus}>Next</button>
        {this.state.image}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));


и в песочнице:

https://jsfiddle.net/51jevc4y/
  • Вопрос задан
  • 121 просмотр
Решения вопроса 2
0xD34F
@0xD34F Куратор тега React
{this.state.image}

меняйте на

<img src={this.props.items[this.state.image].img} />

, а

<App />

на

<App items={items} />

UPD. https://jsfiddle.net/69f71jbk/
Ответ написан
Комментировать
@Floatname
Что-то такое можно :)

const items = [
    { img: "https://pbs.twimg.com/profile_images/3117087049/697e0334a13361c6ab68ce00aefefa4f.jpeg" },
    { img: "http://vkclub.su/_data/gifts/134.jpg" },
    { img: "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTBIqdLHvhxu4LAxudRrH2OoJSctYh9pw3NyziKUwbpp77tsOvu" }
];



class App extends React.Component {
  state = {
    image: 1,
  }

  plus = () => {
  	const img = this.state.image;
    this.setState({
      image: (img + 1) % 3,
    });
  }
  
  minus = () => {
    const img = this.state.image;
    this.setState({
      image: (Math.abs(img - 1)) % 3,
    });
  }
  
  render() {
  const {image} = this.state;
    return (
      <div>
        <button onClick={this.minus}>Prev</button>
        <button onClick={this.plus}>Next</button>
        {this.state.image}
        <img src={items[image].img} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы