-
G.dragon°2021-11-03 09:08
- 57
- 0
问题描述：被点击选中的列，选中状态未发生改变。当点击行后，显示的状态还是上一个状态的状态<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>react demo</title> <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/antd/4.12.3/antd.min.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/antd/4.12.3/antd.css" rel="stylesheet"></head><body><div id="app"></div><script type="text/babel"> const { useState, useEffect } = React; let dataOneDay = [ { title:'标签1', key:'label1', // 接口调用使用 value:0, }, { title:'标签2', key:'label2', // 接口调用使用 value:0, } ] // 第三层 const StatisticItem = ({ data, onSelect }) => { console.log(data, 'xz154454500'); return ( <div> { data.map(item=>{ return ( <div onClick={()=>{onSelect(item.key)}} key={item.key}> {item.title}的值是：{item.value}。{ item.active ? '被选中' : '未被选中'} </div> )}) } </div> ) } // 第二层 const StatisticBoard = ({ statisticBoardData, activeItemArr, onChange }) => { const [data, setData] = useState(dataOneDay ); useEffect(() => { let newData = data.map(item=>{ return { ...item, value: statisticBoardData[item.key] } }) console.log(newData, 'xz484444'); setData(newData) }, [statisticBoardData]) function activeDataItem(data, activeItemArr){ // 所以重置 data.forEach(item=>{ item.active=false; }) data.forEach(item=>{ if (activeItemArr.includes(item.key)){ item.active=true; } }) return data; } // 高亮 useEffect(() => { console.log(activeItemArr, 'xz200000'); console.log(activeDataItem(data, activeItemArr), 'xz45454119999'); setData(activeDataItem(data, activeItemArr)) }, [activeItemArr]); useEffect(()=>{ console.log(data, 'xz200001'); },[data]) function changeActiveItemArr(arr, key) { let arrCopy=JSON.parse(JSON.stringify(arr)) const index = arrCopy.indexOf(key); if (index>-1){ // 存在，删除 arrCopy.splice(index,1) }else{ arrCopy.push(key) } return arrCopy; } const onSelect = (key) => { onChange(changeActiveItemArr(activeItemArr, key)) } return ( <StatisticItem data={data} onSelect={onSelect}/> ) } // 最外层父组件： 从服务器获取数据，并传递给其他子项 const App = ()=>{ const [activeItemArr, setActiveItemArr] = useState(['label1'] ); return ( <StatisticBoard statisticBoardData={{ label1:100, label2:200 }} activeItemArr={activeItemArr} onChange={(value)=>{ console.log(value, 'xz1128998'); setActiveItemArr(value) }}/> ) } const Box = ({ activeArr, onChange }) => { useEffect(()=>{ console.log(activeArr, 'xz45544554'); },[activeArr]) function changeActiveItemArr(arr, key) { // 深拷贝arr let arrCopy=[...arr] const index = arrCopy.indexOf(key); if (index>-1){ // 存在，删除 arrCopy.splice(index,1) }else{ arrCopy.push(key) } console.log(arrCopy, 'xz222'); return arrCopy; } return ( <div> <div> <button onClick={()=>{ onChange(changeActiveItemArr(activeArr, 'b')); }}>添加一个</button> </div> { activeArr.map(item=>{ return <div key={item}> {item}</div> }) } </div> ); }; ReactDOM.render( <App />, document.getElementById('app') );</script></body></html>
0
打赏
收藏
点击回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部