使数组在函数组件中可绑定

Question

我正在尝试制作组件，您可以在其中单击某些按钮，然后按钮处于活动状态。我对 REACT 很陌生，但是 AFAIK 如果您想在渲染方法中使用变量，您需要使用 useState 将变量作为钩子应用。我认为这就是我在这里出错的地方。下面的代码仅在加载时单击按钮时不会更新按钮上的活动属性。在 angular 中，我们只需更改数组中的属性，如何使用 REACT 实现这一点？

import React, { useState, useEffect, useRef } from "react";
import { Button, ButtonGroup } from "reactstrap";
const TimeBar = props => {
const buttons = [
{ id: 1, title: "10 min", minutes: 10, isActive: true },
{ id: 2, title: "1 hour", minutes: 60, isActive: false },
{ id: 3, title: "6 hours", minutes: 360, isActive: false },
{ id: 4, title: "12 hours", minutes: 720, isActive: false },
{ id: 5, title: "24 hours", minutes: 1440, isActive: false }
];
function clicked(button) {
button.isActive = true;
alert(button.minutes);
}
return (
<ButtonGroup>
{buttons.map(button => (
<Button
key={button.id}
onClick={() => clicked(button)}
color="secondary"
size="sm"
active={button.isActive}
>
{button.title}
</Button>
))}
</ButtonGroup>
);
};
export default TimeBar;

Answer 1

在这种特殊情况下，您可以通过使用useState()来使其与钩子一起使用。

useState()文档中，您可以进一步了解如何使用代码setButtons中调用的setState()，以及为什么需要改变以前的状态而不是直接更改。

如下所示：

const [buttons, setButtons] = useState([
{ id: 1, title: "10 min", minutes: 10, isActive: true },
{ id: 2, title: "1 hour", minutes: 60, isActive: false },
{ id: 3, title: "6 hours", minutes: 360, isActive: false },
{ id: 4, title: "12 hours", minutes: 720, isActive: false },
{ id: 5, title: "24 hours", minutes: 1440, isActive: false }
]);
const clicked = (button) => {
setButtons(prevState => {        
return prevState.map(e => {
if (e.id === button.id) { e.isActive = true; }
return e;
})  
});
}

或者clicked情况下，您可以执行以下操作：

const clicked = (button:any) => {
setButtons((prevState:any) => {        
const newState = [...prevState];
newState.find(e => e.id === button.id).isActive = true;
return newState;
});
}

建议阅读的文档：钩子 API 参考

我希望这有所帮助！