Я хочу изменить значение состояния на следующее значение eyes каждый раз, когда я нажимаю, чтобы перейти к следующему

import React from "react";

import "./App.css";

function avatar() {
  let eyes = ["close", "happy", "drizzy"];

  const [avatar, setAvatar] = useState({ eyeType: "default" });

  function nextEyes(){
      // do something here
  }

  return (
    <div className="App">
      <div className="avatarEyes" onClick={nextEyes}>{avatar.eyeType}</div>
    </div>
  );
}

export default avatar;
0
dawker wow 9 Фев 2021 в 17:58

1 ответ

Лучший ответ

Наверное, примерно так:

import React from "react";

import "./App.css";

function avatar() {
  let eyes = ["close", "happy", "drizzy"];

  const [avatar, setAvatar] = useState({ eyeType: "default" });

  let eyesIndex = eyes.indexOf(avatar.eyeType);

  function nextEyes() {
    eyesIndex += 1;
    if (eyesIndex >= eyes.length) { eyesIndex = 0; }
    avatar.eyeType = eyes[eyesIndex];
  }

  return (
    <div className="App">
      <div className="avatarEyes" onClick={nextEyes}>{avatar.eyeType}</div>
    </div>
  );
}

export default avatar;
0
DDomen 9 Фев 2021 в 15:09