Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Material列表-单独用于展开的OnClick

Material列表-单独用于展开的OnClick
EN

Stack Overflow用户
提问于 2018-06-13 12:42:42
回答 1查看 671关注 0票数 0

我有一个有嵌套列表的material ui列表。我想知道是否可以有单独的onClick处理程序,当有人单击列表项上的任何位置时,以及当他们具体单击展开图标(列表项右侧的倒挂胡萝卜图标)时。

基本上,我希望当他们单击列表项目中除胡萝卜图标之外的任何位置时,都会出现一个默认过程,然后是一个单独的过程,用于尝试展开嵌套列表。

这个是可能的吗?

注意:我使用的是ReactJs

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-13 12:50:54

您应该在图标单击时使用e.stopPropagation();来防止事件冒泡到父级:

代码语言:javascript
运行
AI代码解释
复制
class App extends React.Component {

  parentClick = () => {
    console.log('Parent clicked!');
  };
  
  iconClick = e => {
    e.stopPropagation();
    console.log('Icon clicked!');
  };
  
  render () {
    return (
      <div className="item" onClick={this.parentClick}>
        <span>Really long text to take up some room in the item.</span>
        <span onClick={this.iconClick}>Icon</span>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
代码语言:javascript
运行
AI代码解释
复制
.item {
  margin-top: 20px;
  padding: 15px;
  background: #ededed;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
代码语言:javascript
运行
AI代码解释
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50845963

复制
相关文章
Java写 soapclient,PHP通过SoapClient调用Java发布的WebService
http 是指:接口端提供http链接,将数据以json或XML格式输出到网页中。php调用端通过file_get_contents或curl方法来调用,GET/POST方式来传参。
全栈程序员站长
2022/11/17
2.4K0
soapclient php 扩展,PHP扩展—SOAP[通俗易懂]
SOAP扩展可以用于编写SOAP服务器和客户端,支持 SOAP 1.1, SOAP 1.2 和 WSDL 1.1 规格的子集。
全栈程序员站长
2022/11/16
2K0
php使用Snoopy类
这是为了抓取网页的内容而使用的方法。$URI参数是被抓取网页的URL地址。抓取的结果被存储在 $this->results 中。
友儿
2022/09/11
2.8K0
php 的webservice类库NuSoap介绍
 NuSOAP 是 PHP 环境下的 WEB 服务编程工具,用于创建或调用 WEB 服务。它是一个开源软件,当前版本是 0.9.5 ,支持 SOAP1.1 、 WSDL1.1 ,可以与其他支持 SOAP1.1 和 WSDL1.1 的系统互操作。 NuSOAP 完全由PHP语言编写,由一系列 PHP 类组成,不需要扩展库的支持,这种特性使得 NuSOAP 可以用于所有的 PHP 环境,不受服务器安全设置的影响。 
Java架构师必看
2021/03/22
4K0
如何使用`systemctl status`命令来查看服务状态?
Systemctl是Linux系统中用于管理系统服务的工具,它提供了一系列命令,用于启动、停止、重启和查看服务状态等操作。其中,systemctl status命令用于查看服务的当前状态和相关信息。本文将详细介绍如何使用systemctl status命令来查看服务状态。
网络技术联盟站
2023/06/20
11.6K0
如何使用`systemctl status`命令来查看服务状态?
Laravel 如何使用 PHP 内置的服务器启动服务
本文为joshua317原创文章,转载请注明:转载自joshua317博客 https://www.joshua317.com/article/182
joshua317
2021/11/05
8.2K0
PHP 5.4 内置Web服务器使用说明
PHP是一种脚本语言,它需要PHP解释器来分析运行PHP文件。当把PHP做为CGI服务Web请求时,它需要被嵌入到某种Web服务器里,最常见的是集成到Apache或IIS里,这就是说,在使用PHP前,你需要安装Apache或IIS,并且正确的配置它们和PHP集成的参数。虽然这种配置已经很规范,文档非常丰富,但我们还是经常在安装Apache和PHP集成时遇到问题,而且,有时候我们只想测试一个简单的PHP特征,不想就为此安装、启动Apache服务。
魏杰
2022/12/23
1.8K0
PHP 5.4 内置Web服务器使用说明
使用VS快速将类方法封装成Web服务
在项目中有时需要将整个业务逻辑类下面的方法封装成Web服务,由于只是简单的封装,在Web服务的后台代码中不会写上任何逻辑,这时我们就需要Web服务提供的方法与类下面提供的方法相同,这是就考虑到使用接口。申明一个接口,然后让业务逻辑类和Web服务类都实现该接口即可。这里我们就要用到VS中一个很好的功能:重构!
深蓝studyzy
2022/06/16
4570
使用VS快速将类方法封装成Web服务
如何使用 Serverless + CLB 快速部署 Web 服务
在 《如何快速迁移传统 LB 公网业务到 Serverless》  文章中,为大家介绍了负载均衡 CLB 触发器接入 Serverless 函数的优势、适用场景及配置指引。 在本篇文章中,将实践如何使用负载均衡 CLB 作为 Serverless 服务的访问入口,拓展其低成本、免运维等优势,为开发者平滑迁移应用上云提供参考。 创建云函数 SCF 进入云函数控制台,点击 “新建” 进行函数创建。 函数控制台地址:https://console.cloud.tencent.com/scf/list 选择
腾讯云serverless团队
2021/03/18
1.3K0
使用 RESTful Web 服务
本指南将引导您完成创建使用#spring# #spring认证# RESTful Web 服务的应用程序的过程。
IT胶囊
2022/09/06
2K2
使用 RESTful Web 服务
PHP使用curl取HTTP状态码
Curl取HTTP状态码 PHP代码 收藏 function curl_200($url){ $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); //设置URL curl_setopt($curl, CURLOPT_HEADER, 1); //获取Header curl_setopt($curl,CURLOPT_NOBODY,true); //Body就不要了吧,我们只是需要Head curl_setopt($curl, CURL
墨渊
2018/05/11
2K4
PHP使用curl取HTTP状态码
PHP使用curl取HTTP状态码 V站笔记 function curl_200($url){ $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); //设置URL curl_setopt($curl, CURLOPT_HEADER, 1); //获取Header curl_setopt($curl,CURLOPT_NOBODY,true); //Body就不要了吧,我们只是需要Head curl_setopt($curl, CUR
V站CEO-西顾
2018/06/09
1.5K0
PHP反射类,ReflectionClass、ReflectionMethod的使用
本文为joshua317原创文章,转载请注明:转载自joshua317博客 https://www.joshua317.com/article/46
joshua317
2021/08/31
2K0
SaaS-有状态服务和无状态服务
有状态和无状态服务是两种不同的服务架构,两者的不同之处在于对于服务状态的处理。服务状态是服务请求所需的数据,它可以是一个变量或者一个数据结构。无状态服务不会记录服务状态,不同请求之间也是没有任何关系;而有状态服务则反之。对服务器程序来说,究竟是有状态服务,还是无状态服务,其判断依据——两个来自相同发起者的请求在服务器端是否具备上下文关系。
cwl_java
2020/01/02
3K0
Spring认证指南:了解如何使用 Spring 的 RESTful Web 服务
原标题:Spring认证中国教育管理中心-了解如何使用 Spring 的 RESTful Web 服务(Spring中国教育管理中心)
IT胶囊
2022/01/25
9140
Spring认证指南:了解如何使用 Spring 的 RESTful Web 服务
PHP如何使用Redis
一个string类型的field和value的映射表,特别适合用于存储对象。每个 hash 可以存储 2的32次方 - 1 键值对(40多亿) hash表相当于 redis存储 key => value 中的key, 表内容相当于 value
用户1349575
2022/02/08
1.1K0
使用ServiceStack构建Web服务
提到构建WebService服务,大家肯定第一个想到的是使用WCF,因为简单快捷嘛。首先要说明的是,本人对WCF不太了解,但是想快速建立一个WebService,于是看到了MSDN上的这一篇文章 Building Cross-Platform Web Services with ServiceStack,所以这里简要介绍一下如何使用ServiceStack快速建立一个WebService服务。 当然,在开始之前,首先要说明一下ServiceStack是个什么东西。 在国内用ServiceStack的似乎很少
庞小明
2018/03/07
1.8K0
使用ServiceStack构建Web服务
PHP的反射类ReflectionClass、ReflectionMethod使用实例
PHP Reflection API是PHP5才有的新功能,它是用来导出或提取出关于类、方法、属性、参数等的详细信息,包括注释。
全栈程序员站长
2022/11/17
2.3K0
React/ReactNative 状态管理: rematch 如何使用
有同学反馈开发 ReactNative 应用时状态管理不是很明白,接下来几篇文章我们来对比下 React 及 ReactNative 状态管理常用的几种框架的使用和优缺点。
张拭心 shixinzhang
2023/03/27
1.2K0
React/ReactNative 状态管理: rematch 如何使用
点击加载更多

相似问题

使用SOAP的有状态PHP Web服务

310

使用SoapClient调用的Web服务

10

PHP SoapClient调用Java Web服务

10

如何使用SoapClient类进行PHP调用

136

SAP Web服务PHP SoapClient输入参数

128
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档