如何在反应列表中隐藏特定元素？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在反应列表中隐藏特定元素？相关的知识，希望对你有一定的参考价值。
我想隐藏反应列表中的特定元素。
状态如下：
this.state = {
lgShow: false,
list: [
{ id:1, hidden: true },
{ id:2, hidden: true }
]
};
这是组件的样子：
props.list.map( result => (
<button onClick={toggle(result.id)}> Hide </button>
{ result.hidden && <div id={result.id}> .... </div> }
))
我想编写函数切换来搜索App.js中的id并更改该id的隐藏值，就像这样（虽然在这种情况下我不能设置setState（））。
let toggle = id => {
this.state.list.filter( val=>val.id===id ? val.hidden=!val.hidden )
}
答案
let toggle = id => {
let newList = list.map(val => val.id === id ? { id: val.id, hidden: !val.hidden} : val);
this.setState({list: newList})
}
你可以在里面切换到setState()
另一答案
你需要使用setState方法来更新list的状态，这是在react中更新DOM的唯一方法。每次状态/道具只改变时，DOM将重新渲染。这就是React的工作原理。
我更新了toggle函数，它现在迭代list数组，并切换id param中传递的toggle(id)隐藏标志。
class App extends React.Component {
constructor() {
super();
this.state = {
lgShow: false,
list: [
{ id:1, hidden: true },
{ id:2, hidden: true }
],
};
} // end of constructor
toggle = (id) => {
const list = this.state.list.map(item => {
if (item.id === id) {
return { ...item, hidden: !item.hidden };
}
return item;
})
this.setState({ list })
} // end of toggle
render() {
return (
<div>
{list.map( result => (
<>
<button onClick={() => toggle(result.id)}> Hide </button>
{result.hidden && <div id={result.id}>....</div>}
</>
))}
</div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>以上是关于如何在反应列表中隐藏特定元素？的主要内容，如果未能解决你的问题，请参考以下文章