时间戳

首页 > 解决方案 > 在不使用 JQUERY 的情况下使用 onClick n React 显示/隐藏 li 的策略

javascript - 在不使用 JQUERY 的情况下使用 onClick n React 显示/隐藏 li 的策略

问题描述

我正在尝试隐藏/显示一个<li>元素。我知道这可以使用 JQuery 来完成，但我宁愿不将操作实际 DOM 与 React 的虚拟化 DOM 操作混为一谈。话虽如此，我已经给每个<li>元素一个唯一的名称来引用，即：一个整数。

我的目标是单击位于每个按钮中的按钮<li>，然后隐藏该特定<li>元素。当我检查元素时，很明显每个元素都有一个唯一的名称，但是为什么我在使用时<li>无法访问特定的名称？<li>element.target.name

triggerDeletePost(event) {
    var element = event.target.name
    console.log('element', element) //undefined
}




<li key = {post.post_id} name = {post.post_id}>
        <Card>
            <Card.Header>
            <userContext.Consumer>
                {()=> {
                    return(
                        <DropdownButton id="dropdown-basic-button" title="" style={{float: 'right'}}>
                            <Dropdown.Item onClick={(event)=>this.triggerDeletePost(event)}>Delete Post</Dropdown.Item>
                        </DropdownButton>
                    )
                }}
            </userContext.Consumer>
            </Card.Header>
            <Card.Body>
               <p>{post.message}</p>
            </Card.Body>
        </Card>
</li>

标签： javascriptjquerynode.jsreactjshtml-lists

解决方案

在您的情况下，target必须是Dropdown.Item实际被点击的 html 元素。它甚至可能是此 Component 根元素的最深元素，例如<span>,<i>等。

为了获取name元素的属性<li>- 我建议使用Element 类的最接近的方法。

例如：

triggerDeletePost({currentTarget}) {
  const $li = currentTarget.closest('li[name]');
  const name = $li.getAttribute('name');
  console.log(name, $li) // here you have it
}

推荐阅读