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

Question

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

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

比方说，我从Api获得Sara，现在当我单击元素时，我想让受让人更改为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>

Answer 1

您可以更改assignee状态变量，以保持数组中相应人员的索引。像这样：

const [assignee, setAssignee] = useState<number>(-1);

const handleAssigneeOnClick = () => {
setAssignee(prev => (prev + 1) % 3);
};

这将索引设置为索引+1除以3的余数。如果您的数组增长，您也可以执行users.length以获得更动态的内容。

然后在您的返回中，显示如下名称：

<div
className="assignee"
onClick={handleAssigneeOnClick}
>
<p>{users[assignee]}</p>
</div>

我将初始状态值设置为-1，因为在单击之前，初始字符串似乎为空。如果您希望在默认情况下分配某个人，则可以将其明显更改为0。

---

工作示例：

const users = ["Bill", "Steve", "Sara"];
const App = () => {
const [assignee, setAssignee] = React.useState(-1);

const handleAssigneeOnClick = () => {
setAssignee(prev => (prev + 1) % 3);
};

return (
<div
className="assignee"
onClick={handleAssigneeOnClick}
>
<p>{users[assignee]}</p>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('app'));

div {
background: red;
height: 20px;
}

<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="app"></div>

Answer 2

我会以不同的方式构建它，并将索引存储在状态中。

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

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

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>