gpt4 book ai didi

javascript - 如何确保 React 钩子(Hook)中的状态不陈旧

转载 作者:行者123 更新时间:2023-11-30 19:20:49 26 4
gpt4 key购买 nike

我使用下面创建的按钮似乎滞后于 selectedButtonIdx 值。

调用 getClasstoggleSelected 是否未完成?

function ButtonGroup(props) {
const [selectedButtonIdx,setIdx]=useState(props.loadCurrentAsIndex);

const toggleSelected = (e) => {
setIdx(parseInt(e.target.dataset.index));
props.onclick(e);
};

const getClass = (index) => {
return (selectedButtonIdx === index) ? classnames('current', props.btnClass)
: classnames(props.btnClass)
};

let buttons = props.buttons.map((b, idx) => <Button key={idx} value={b.value} index={idx} text={b.text}
onclick={e => toggleSelected(e)}
btnClass={getClass(idx)}/>);

return (
<div>
{buttons}
</div>
);
}

每次点击都应通过更改类向用户显示组中的哪个按钮被点击。

最佳答案

通过观察这个,

<Button 
key={idx}
value={b.value}
index={idx}
text={b.text}
onclick={e => toggleSelected(e)}
btnClass={getClass(idx)}
/>

Button 是您的自定义组件,

这里有两点需要注意,

  1. 您提供了onclick(c 很小) Prop ,在您的实际组件中它应该是onClick={props.onclick}
  2. 您已经使用了 e.target.dataset.index,要使用 dataset,我们应该有带有 data- 前缀的属性。所以你的 index 在你的实际组件中应该是 data-index

最后你的 Button 组件应该是,

const Button = (props) => {
return <button text={props.text} data-index={props.index} onClick={props.onclick} className={props.btnClass}>{props.value}</button>
}

Demo

关于javascript - 如何确保 React 钩子(Hook)中的状态不陈旧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57505146/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com