使用onClick n React展示/隐藏li而不使用JQUERY的策略

Question

我正在尝试隐藏/显示<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>

Answer 1

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

为了获得元素name的<li>属性-我建议使用元素类的closest方法。

例如：

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