reactjs - 在一定时间后关闭一个弹出窗口并打开另一个弹出窗口
问题描述
我目前正在尝试为应用程序制作弹出教程。我的问题是我需要显示一个弹出窗口,当单击“下一步”按钮时,关闭当前弹出窗口并在一段时间后打开另一个。尝试设置新状态时,当前弹出框正在关闭,但下一个未打开。我正在使用 react-native-popover-view。这是我的代码:
const Details = props => {
const [popoverDetails, setPopoverDetails] = useState([
{
mainText: 'popover 1',
textPopover: 'popover 1',
visible: false,
},
{
mainText: 'popover 2',
textPopover: 'popover 2',
visible: false,
},
{
mainText: 'popover 3',
textPopover: 'popover 3',
visible: false,
},
]);
useEffect(() => {
setTimeout(() => {
let tmp = [...popoverDetails];
tmp[0].visible = true;
setPopoverDetails(tmp);
}, 1000);
}, []);
const nextTuto = i => {
console.log('i : ', i);
let tmp = [...popoverDetails];
tmp[i].visible = false;
tmp[i + 1].visible = true;
setPopoverDetails(tmp)
console.log('tmp : ', tmp);
console.log('popverdetails : ', popoverDetails);
};
return (
<View style={{flex: 1}}>
<Text>Ranking page</Text>
{popoverDetails.map((pD, i) => (
<Popover
isVisible={pD.visible}
onRequestClose={() => {
let tmp = [...popoverDetails];
tmp[i].visible = false;
setPopoverDetails(tmp);
}}
from={
<TouchableOpacity
onPress={() => {
setShowPopover1(true);
let tmp = [...popoverDetails];
tmp[i].visible = true;
setPopoverDetails(tmp);
}}>
<Text>{pD.mainText}</Text>
</TouchableOpacity>
}>
<Text>{pD.textPopover}</Text>
<Button onPress={() => nextTuto(i)} title="Next" />
</Popover>
))}
</View>
);
};
tmp 和 popoverDetails 是相同的。我也试过设置一个 setTimeout 但它似乎不起作用。关于如何执行此操作的任何建议?
解决方案
您似乎不知道如何将其用于状态。React 状态请参考官方文档。解决方法如下。
const nextTuto = i => {
setPopoverDetails((prevArr) => prevArr.map((v,index) => index === i+1 ? ({...v, visible: true }) : ({...v, visible: false }) ) )
};
推荐阅读
- ios - 根据应用外观设置更改启动屏幕外观 (.dark/.light/.unspecified) SwiftUI iOS 13 with Storyboard
- firebase - 我该如何命名这个 blob?
- java - 将插件“kotlin-parcelize”与插件“kotlin-android-extensions”相结合
- php - 如何确保用户输入的格式为“H:MM AM/PM, DURATION MIN/HR?
- html - 该框未居中,并且还与它一起移动背景图像
- google-bigquery - 将@@error.stack_trace 保存在表中以进行日志记录
- php - 选择框问题
- javascript - 为 highcharts 地图添加标记点
- airflow - 多个气流调度器
- python - 通过 python linux 运行 python 脚本