代码之家 › 专栏 › 技术社区 › alter123

如何在反应列表中隐藏特定元素?

ecmascript-6 reactjs

alter123 · 技术社区 · 7 年前

我想在反应列表中隐藏一个特定的元素。

状态如下:

 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更改hidden的值,类似于这样(尽管在本例中我无法设置state())。

 let toggle = id => {
    this.state.list.filter( val=>val.id===id ? val.hidden=!val.hidden )
 }

2 回复 | 直到 7 年前

illiteratewriter 7 年前

let toggle = id => {
  let newList = list.map(val => val.id === id ? { id: val.id, hidden: !val.hidden} : val);
  this.setState({list: newList})
}

您可以在内部切换到 setState()

Adeel Imran 7 年前

你需要使用 setState 更新的状态的方法 list ,这是在react中更新dom的唯一方法。每次只有状态/属性更改时,DOM才会重新呈现。这就是反应的工作原理。

我已经更新了 toggle 函数,它现在迭代 列表 数组,并切换 id 传入的隐藏标志 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>

P.S:我没有运行这个代码,只是在记事本上进行了一次试运行。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前