时间戳

首页 > 解决方案 > React - OnClick 显示数组中的下一个元素

arrays - React - OnClick 显示数组中的下一个元素

问题描述

我有一个名为assignee. 受让人可以是我在下面列出的数组中的三个名称之一。在启动时，我调用一个返回当前受让人（如果存在受让人）的 API。我将受理人变量设置为我从 API 收到的名称。

我有一个div显示受让人姓名的元素，当用户单击此元素时，我希望受让人根据列表顺序进行更改。我该如何解决这个问题？

假设我Sara是从 Api 获取的，现在当我单击我希望受让人更改为的元素时，然后更改Bill为Steve，然后更改为Sara。它应该回到数组的开头并重新迭代。这是解决这个问题的最佳方法还是有更好的方法来解决这个问题？

const users = ["Bill", "Steve", "Sara"];
const [assignee, setAssignee] = useState<string>();

..

const handleAssigneeOnClick = () => {
    setAssignee(users[0]);
  };

..

<div
  className="assignee"
  onClick={() => {
    handleAssigneeOnClick();
  }}
>
  <p>{assignee}</p>
</div>

标签： arraysreactjstypescript

解决方案

我会稍微不同地构造它并将索引存储在状态中。

它检查当前索引是否是最后一个索引，如果是，则返回到开头。否则，它只会添加一个。

然后使用索引打印当前选定的用户。

const {useState, useEffect} = React;

const users = ["Bill", "Steve", "Sara"];
const Example = () => {
  const [selected, setSelected] = useState(0);
  
  const handleAssigneeOnClick = () => {
    setSelected(prev => {
      if (prev === users.length - 1) {
        return 0;
      } else {
        return prev + 1;
      }
    });
  };
   
  return (
    <div onClick={handleAssigneeOnClick}>
      <p>{users[selected]}</p>
    </div>
  )
}

ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

推荐阅读