我创建cookie的函数正确吗？如何删除程序开头的 cookie？有简单的编码吗？ 函数 createCookie(名称、值、天数) 函数 setCookie(c_name,...
通过 github 操作创建 EC2 AMI 时出现错误：exec: "session-manager-plugin": $PATH 中找不到可执行文件
==> learn-packer.amazon-ebs.ubuntu：exec：“session-manager-plugin”：在 $PATH 中找不到可执行文件 learn-packer.amazon-ebs.ubuntu：启动 portForwarding 会话“Amy-
ASP.NET MVC 站点和具有相同名称但不同域的 cookie
我遇到了这样的问题：cookie 永远不会被设置，因为我相信它使用了错误的cookie。这发生在 play.exposureevents.store 上。我不知道怎么做，但 Exposureevents.com cookie 是
这个问题一直让我抓狂。我在前端使用 React 和 Apollo (GraphQL)，并在后端使用 Passport.js 和 Express cookie 会话进行身份验证。一切都很完美
我正在尝试在 svelte 中创建一个 cookie（我也在使用 svelte 套件）并访问它。我想使用 cookie 进行身份验证，更具体地说，是存储 JWT 令牌。 我已经试过了
当我尝试在请求中创建产品时，我的应用程序没有发送refreshToken cookie。 首先，当我登录时，我的refreshToken被设置为一个cookie，我可以在
我目前正在开发一个预订系统，我使用的身份验证是JWT并将其保存在我的cookie中。这就是我在用户登录后发送cookie的方式。 反应登录 const 登录 = 异步 ...
我有以下功能： def do_login(用户): “”“登录用户。”“” 会话[CURR_USER_KEY] = user.id 以及以下测试： def test_do_login(自我): ...
我的会话 cookie 遇到了奇怪的行为：在我的 Mac 上运行 Flask 应用程序，一切正常，并且在任何浏览器上都设置了 cookie。 但是，如果我在 Windows 服务器上运行它，
我正在编写一个程序来登录我的大学网站，作为我项目的一部分。我遇到的问题是如何设置 Cookie 并让我的浏览器启用这些 Cookie，我的代码如下并给我
无法在 Next.js 中的应用程序路由器中设置 cookie
我正在学习next.js，并且想设置一个cookie，如下面的代码所示。 代码返回错误：“未处理的运行时错误。错误：Cookie 只能在服务器操作或 Ro 中修改...
NextJS - 在应用程序路由器服务器组件中设置 cookie 的最佳方法
我有一个需求，在页面加载时在数据库中增加一个标志，并设置一个过期时间为5分钟的cookie，并在下次页面加载时检查cookie是否过期...
要在 CLI 中承担 AWS 角色，我执行以下命令： aws sts 假设角色 --role-arn arn:aws:iam::123456789123:role/myAwesomeRole --role-session-name test --region eu-central-1 这给...
我有一个始终固定在视图底部的 cookie 部分。 啦啦啦啦 我有一个始终固定在视图底部的 cookie 部分。 <section id="cookie-section"> <span id="cookie-text">Bla bla bla</span> </section> #cookie-section { min-height: 50px; width: 100%; position: fixed; display: flex; bottom: 0; background-color: rgba(38, 38, 38, 0.9); } 但是当你滚动并到达页面底部时，我想为其添加 50px 的 margin-bottom 。我该怎么做？ 当你只是添加 margin-bottom: 50px; 到它时，它已经在开始时获得了我不想要的边距。仅当您滚动到达页面底部时。 可以使用滚动驱动动画，但支持还不好。 您可以使用 Google Chrome 测试以下内容 #cookie-section { min-height: 50px; inset: auto 0 0; position: fixed; display: flex; background-color: rgba(38, 38, 38, 0.9); color: #fff; animation: margin 2s; animation-timeline: scroll(root) } @keyframes margin { 0%,90% {margin-bottom:0;} 100% {margin-bottom:50px;} } body { min-height: 300vh; } <section id="cookie-section"> <span id="cookie-text">Bla bla bla</span> </section>
以下功能失败并出现错误“Auth Session Missing” const { 错误 } = 等待 supabase.auth.updateUser({ 密码： 密码， }); 在我的手机上获取重置密码链接后...
Session 接口方法 createQuery(String queryString) 已弃用。为什么它被弃用？它已经过时了，但还没有提出任何替代方案。是否有类似的字符串 HQL 方法...
受 Supabase 文档的启发，我在 React Native 应用程序中有以下代码： 使用效果（（）=> { if (session?.user?.id === null) 返回 常量通道=supabase .channel('值数据库更改', {
我在 Google 和 Stackoverflow 上搜索了很多。我找不到如何从网页获取 Cookie（或者一般来说，HTTP 标头），然后对其进行编辑并将其发回？ [我知道怎么发POST了...
使用 PHP.net 替代 session_regenerate_id() 时，SESSION 为空[重复]
在 php.net 的 session_regenerate_id 手册页上，他们建议不要使用该函数，因为如果有人没有可靠的互联网连接，您可能会遇到问题。我用了他们的代码
我想用WinINet登录我的作品网页。 int main() { HINTERNET hInet = InternetOpenA("UserAgent/1.0", INTERNET_OPEN_TYPE_PRECONFIG,0, 0, 0 ); 如果（！hInet） {
CSRF 验证失败。请求被中止。 （CSRF 令牌在明显存在时未设置）
是的，我将 csrf 令牌添加到我的表单中，是的，我在表单中添加了 post 方法，是的，我检查了服务器发送 cookie 是否与客户端 cookie 匹配。其他好的背景也许是我有
剧作家：ReferenceError：browserContext未定义
我正在 beforeAll 挂钩中创建一个新的 browserContext 来清除 cookie、sessionStorage 和 localStorage。这工作正常并且测试顺利通过。然而，我越来越...
swift wkwebview httponly cookies 设置值
在wkwebview中我们可以设置cookie的httponly值吗？我们有什么办法可以快速做到这一点吗？ 如果让 newCookie = HTTPCookie(属性: [ .域名：&qu...
我最近在我们面向公众的网站上启用了 WAF。这导致了许多误报，我相信合法用户偶尔会被阻止。 其中许多误报...
我的外部登录回调处理程序将成功设置 aspnet cookie，但不会重定向到授权端点以继续 OpenIddict 中的 OIDC 流程。例如，这个： app.MapMethods(&...
我正在尝试使用 keycloak REST API 删除用户会话， 但获取 403 禁止 Http 状态代码。 我正在将令牌和 cookie 传递到标头中，如果我遗漏了某些内容，请告诉我...
我在客户端组件中遇到条件渲染问题。每次完成条件渲染（在本例中基于 cookie 的值）时，我都会收到以下错误： 反应-...
我想最初隐藏图像，然后仅在第一个页面加载时显示它，这通过检查 cookie 来确定。然而，这种方法可能会导致最大内容的问题......
配置 SAML2：绕过“InResponseTo”验证，同时保留 OpenSaml4AuthenticationProvider 中的默认设置
我有一个在 Nginx 和 Spring Security 后面运行的 Java 后端应用程序用于 SSO。我的后端应用程序缺乏记住 cookie 会话的机制，因为 SSO 请求可能由...发起
即使在 Flask 应用程序中启用了 CORS，也未设置 Cookie
请注意：像这样的问题有很多，但没有一个对我有用，这就是我问这个的原因。 我的 REST API 是一个 Flask 应用程序。我的 /login 端点使用 JWT 并设置
如何在 vitest 中测试 laravel sainttum 路线
我有一个应用程序，使用 Vue 框架作为客户端，使用 laravel 框架作为服务器。 我的身份验证是通过 laravel sainttum 完成的，这是一个基于 cookie 的身份验证系统。 我当前的设置...
在 Next.js 应用程序路由器中的服务器端请求后通用重定向到登录
我想做一个服务器端请求并获取用户数据，这是通过cookie进行身份验证的。我通过 cookies 功能转发 cookies（示例中未显示）。 当认证失败并且...
如何让同一子域上的不同 Django 应用程序共享会话 cookie？
我们在同一个子域上部署了几个 Django 应用程序。一些高级用户需要在这些应用程序之间跳转。我注意到，每次他们在应用程序之间跳转时，他们的
大家好，我正在尝试修复 WordPress 网站中的错误 问题是当我尝试注册新用户时，它可以工作，但他们没有登录，或者需要一些时间才能显示登录的用户 这是我的乐趣...
jQuery Ajax 在 php 同一页面上传递值 - 更新
如何找回： 如何找回： <div id="test"> <?php if (isset($_POST['sweets'])) { ob_clean(); echo $_POST['sweets']; exit; } ?> </div> <form id="a" action="" method="post"> <select name="sweets" onchange="change()" id="select1"> <option >Chocolate</option> <option selected="selected">Candy</option> <option >Taffy</option> <option >Caramel</option> <option >Fudge</option> <option >Cookie</option> </select> </form> <!-- Script --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> function change() { var sweets = $("#select1").val(); $.ajax({ type: "POST", data: { sweets: sweets }, success: function(data) { $("#test").html(data); } }); } </script> 将值传递给 php 字符串： $string = $_POST['sweets']; <!-- I'm looking for this: --> 我希望这是可能的。我在 stackoverflow 和 google 上寻找答案，但找不到适合我的目的的答案。 对于同一个页面的ajax/PHP脚本，可以将PHP放在脚本的最前面，当有POST提交数据时以exit结束 为了使其更有意义，您应该返回与您通过 POST 提交的内容相关的内容（这是甜食的类型），作为示例，我们展示其一般定义。我们可以使用 switch，这是用于此目的的常用结构： switch ($string) { case "Chocolate": echo "Chocolate is made from cocoa beans, the dried and fermented seeds of the cacao tree"; break; case "Candy": echo "Candy is a sweet food made from sugar or chocolate, or a piece of this"; break; case "Taffy": echo "Taffy is a type of candy invented in the United States, made by stretching and/or pulling a sticky mass of a soft candy base"; break; case "Caramel": echo "Caramel is made of sugar or syrup heated until it turns brown, used as a flavouring or colouring for food or drink"; break; case "Fudge": echo "Fudge is a dense, rich confection typically made with sugar, milk or cream, butter and chocolate or other flavorings"; break; case "Cookie": echo "A cookie (American English) or biscuit (British English) is a baked snack or dessert that is typically small, flat, and sweet"; break; } exit; } ?> 所以以下是示例代码： <?php if (isset($_POST['sweets'])) { // ob_clean(); $string = $_POST['sweets']; switch ($string) { case "Chocolate": echo "Chocolate is made from cocoa beans, the dried and fermented seeds of the cacao tree"; break; case "Candy": echo "Candy is a sweet food made from sugar or chocolate, or a piece of this"; break; case "Taffy": echo "Taffy is a type of candy invented in the United States, made by stretching and/or pulling a sticky mass of a soft candy base"; break; case "Caramel": echo "Caramel is made of sugar or syrup heated until it turns brown, used as a flavouring or colouring for food or drink"; break; case "Fudge": echo "Fudge is a dense, rich confection typically made with sugar, milk or cream, butter and chocolate or other flavorings"; break; case "Cookie": echo "A cookie (American English) or biscuit (British English) is a baked snack or dessert that is typically small, flat, and sweet"; break; } exit; } ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <select name="sweets" onchange="change()" id="select1"> <option value="">Please select</option> <option >Chocolate</option> <option >Candy</option> <option >Taffy</option> <option >Caramel</option> <option >Fudge</option> <option >Cookie</option> </select> <br><br> <div id="test"></div> <script> function change() { var sweets = $("#select1").val(); $.ajax({ type: "POST", data: { sweets: sweets }, success: function(data) { $("#test").html(data); } }); } </script>
如何使用 React 和 RTK 查询处理 JWT 令牌刷新周期：自动重新获取失败的查询
在我的应用程序中，我有一个令牌刷新端点 /refresh，它在 cookie 中设置新的 JWT 刷新令牌并将新的 JWT 访问令牌作为 json 发送回。 由于访问令牌会在 5 分钟后过期，所以我...
我尝试将twig转换为tpl，以便能够在2,3,0中使用3,0,0付款扩展。 树枝线 我尝试将 twig 转换为 tpl 以便能够在 2,3,0 中使用 3,0,0 付款扩展。 树枝线 <select name="payment_special_mode" class="form-control"> <option value="1" {{ payment_special_mode? 'selected' : '' }}>{{ text_enabled }}</option> <option value="0" {{ payment_special_mode? '' : 'selected' }}>{{ text_disabled }}</option> </select> <select name="payment_special_mode" class="form-control"> <option value="1" {{ payment_special_mode? 'selected' : '' }}>{{ text_enabled }}</option> <option value="0" {{ payment_special_mode? '' : 'selected' }}>{{ text_disabled }}</option> </select> 前往tpl线路 <select name="payment_special_mode" class="form-control"> <?php if ($payment_special_mode) { ?> <option value="1" selected="selected"><?php echo $text_enabled; ?> </option> <option value="0"><?php echo $text_disabled; ?></option> <?php } else { ?> <option value="1"><?php echo $text_enabled; ?></option> <option value="0" selected="selected"><?php echo $text_disabled; ?></option> <?php } ?> </select> 这是正确的吗 是的，我做到了，但没有成功，仍然在管理扩展行中可见，但有文本。用了opencartbot转换器，转换了大部分，但是有4行没有。检查了所有文件和文件夹。 读了很多标题，问了很多论坛，我找不到办法。如果我能以正确的方式将 twig 转换为 tpl，则在 3,0,2 扩展中必须有效。 我还将 user_token 更改为 token，$data['token'] = $this->session->data['token']
Python 3.7 BeautifullSoup soup.find 错误 - find() 不接受关键字参数
我从 URL 获得了以下 HTML： 我从 URL 中获得了以下 HTML： <h4> \r\n \r\n\r\n <a href="/l"> \r\n <!-- mp_trans_rt_start id="1" args="as" 1 -->\r\n <span class="brandWrapTitle">\r\n <span class="productdescriptionbrand">Mxxx</span>\r\n </span>\r\n <span class="nameWrapTitle">\r\n <span class="productdescriptionname">Axxxname</span>\r\n </span>\r\n <!-- mp_trans_rt_end 1 -->\r\n </a> \r\n\r\n </h4> 我正在尝试使用 python 来查找类名： import urllib.request from bs4 import BeautifulSoup url = "https://link" user_agent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.47 Safari/537.36' urlwithagent = urllib.request.Request(url,headers={'User-Agent': user_agent}) response = urllib.request.urlopen(urlwithagent) soup = response.read() product = soup.find("h4", attrs ={"class=": "productdescriptionname"}) print (product) Everythink 完美运行直到上线： product = soup.find("h4", attrs ={"class=": "productdescriptionname"}) 我收到如下错误： find() takes no keyword arguments 我不知道如何解决它 - 有很多信息，但没有任何作用：/ 在使用 BeautifulSoup 之前，您需要将其转换为 find 对象，否则它会使用 str.find 例如： soup = BeautifulSoup(response.read(), "html.parser") product = soup.find("h4", attrs ={"class": "productdescriptionname"}) print (product) 我认为这值得一提，如果 find 方法有问题，检查 type(soup) 是一个很好的方法来查明您是否正在使用正确的 bs4.BeautifulSoup 对象而不是 str。 我想在这里指出一件事，如果使用 soup.prettify() 使 html 可读。需要注意的是，.prettify() 将 bs4.BeautifulSoup 转换为 str。所以这应该单独使用，例如： soup = BeautifulSoup(response) # type(soup) --> bs4.BeautifulSoup print(soup.prettify()) # print readable html 不喜欢： soup = BeautifulSoup(response).prettify() # type(soup) --> str 我在网上读到的关于这个问题的另一件事是这样的：“你的 beautiful soup 版本可能不支持 find。”因此，我最终升级和降级了版本很多次，然后才意识到这是一个错误的陈述由业余爱好者制作。 在打印之前我已经为此奋斗了大约 45 分钟type(soup)。我希望这可以节省其他人的时间。 Может кому подойдет история такая повторял за автором ютуба и переписывал код для парсинга и вышла такая же ошибка как в вопросе искал читал, шерстил инет пока не начал перепроверять свой код в общем мой код с ошибкой: from requests import Session from bs4 import BeautifulSoup as BS from time import sleep headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 YaBrowser/23.11.0.0 Safari/537.36'} work = Session() work.get('https://quotes.toscrape.com/', headers=headers) response = work.get('https://quotes.toscrape.com/login', headers=headers) soup = BS(response.text, 'lxml') token = soup.find('from').find('input').get('') в чем здесь ошибка？ вот в этой строке token = soup.find('from').find('input').get('') а именно soup.find('from') я решил скать ошибку методом исключения поэтому довел до такого состояния и понял что в странице нет тэга '来自' а есть тэг '形式' как только поменял на тэг 'form' ошибка с soup.find() - find() ушла может кому поможет
在 Rails 5 中单击浏览器上的后退按钮时，带有 Select2 的表单会重复
_header.html.erb（用于表单部分） <%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %> _header.html.erb（用于表单部分） <%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %> <div class="form-group" style="display:inline;"> <div class="input-group input-group-md"> <%= text_field_tag :q, params[:q], placeholder: ... ,class: 'form-control hideOverflow', type: "search" %> <%= select_tag "category", options_from_collection_for_select(...),include_blank: true, class: 'form-control hideOverflow', type: "search" %> <%if logged_in? %> <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', type: "search" %> <% else %> <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', include_blank: true, type: "search" %> <% end %> <span class="input-group-addon"><%= submit_tag "Search", class: "btn-transparent"%></span> </div> </div> <% end %> JS代码 <script> $( document ).on('turbolinks:load', function() { $('select#category').select2({ width: '60%', dropdownAutoWidth : true, placeholder: "Choose a category", maximumSelectionLength: 3 }); $('select#location').select2({ width: '40%', dropdownAutoWidth : true, minimumResultsForSearch: Infinity }); }); </script> 故障或渲染问题（单击链接查看图像） 有人可以帮我解决为什么吗？另外，我的搜索表单位于标题部分文件的导航栏中。 如果我去掉脚本中的 $(...).select ，一切都会正常...我认为 select.js 有问题 在此回复： https://stackoverflow.com/a/41915129/5758027 我在自己的代码中使用了这个解决方案： $(document).on('turbolinks:before-cache', function() { // this approach corrects the select 2 to be duplicated when clicking the back button. $('.select-select2').select2('destroy'); $('.select-search-select2').select2('destroy'); } ); 和观察者： $(document).ready( ready ); //... once document ready $(document).ajaxComplete( ready ); //... once ajax is complete $(document).on('turbolinks:load', ready ); //... once a link is clicked function ready() { $(".select-search-select2").select2({ theme: "bootstrap", language: 'es', allowClear: true }); $(".select-select2").select2({ theme: "bootstrap", language: 'es', minimumResultsForSearch: Infinity, allowClear: true }); }; 总是清除缓存不是会让使用 Turbolink 变得毫无意义吗？ 不如这样？ $(document).on('turbolinks:before-cache', function(e) { return $('.form-control.select2').each(function() { return $(this).select2('destroy'); }); }); 我无法解决这个渲染问题（仍在等待正确的答案！），但如果有人像我一样遇到类似的问题，请尝试跳出框框思考。这是我的技巧：我在应用程序中添加了一个后退按钮。 获取完整的url路径 # get the previous url def save_previous_page session[:return_to] = request.fullpath end 仅当页面不是主页或搜索页面时才显示后退按钮 <% if session[:return_to] != request.fullpath%> <%= link_to session.delete(:return_to) || request.fullpath, class: 'back-button' do%> <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> <%end%> <% end %> 同时，我仍在等待并尝试解决渲染问题... 解决了问题 只需将此代码添加到您的 .js 文件中 Turbolinks.clearCache(); 这很可能是一些资源不一致，您应该检查您的 app\views\layouts 文件夹中是否有重复声明 wither jQuery、jQuery UJS 或 Turbolinks 的文件。检查页面的所有 <script> 标签，以及是否在 layout 文件夹和内部视图中声明相同的脚本。如果情况并非如此，请检查是否有 render、yield 或 build 呼叫 简单的解决方案，不要在您不希望它运行的东西上运行 select2 构建器。 $("select#category:not(.select2-container):not(.select2-hidden-accessible)").select2(); Rails 7 更新 这里的很多东西在 Rails 7 中都不起作用，尤其是 turbolinks:before-cache 事件。您正在寻找的新事件是 turbo:before-cache 和 turbo:load，所以它看起来像这样： $(document).on("turbo:before-cache", function() { $("#select_id").select2('destroy'); }); $(document).on('turbo:load', function() { $('#select_id').select2(); });
Laravel POST 方法返回状态：405 不允许在 POST 方法上使用方法
请查找以下信息： NoteController.php 请查找以下信息： NoteController.php <?php namespace App\Http\Controllers; use App\Http\Requests\NoteRequest; use App\Models\Note; use Illuminate\Http\JsonResponse; class NoteController extends Controller { public function index():JsonResponse { $notes = Note::all(); return response()->json($notes, 200); } public function store(NoteRequest $request):JsonResponse { $note = Note::create( $request->all() ); return response()->json([ 'success' => true, 'data' => $note ], 201); } public function show($id):JsonResponse { $note = Note::find($id); return response()->json($note, 200); } public function update(NoteRequest $request, $id):JsonResponse { $note = Note::find($id); $note->update($request->all()); return response()->json([ 'success' => true, 'data' => $note, ], 200); } public function destroy($id):JsonResponse { Note::find($id)->delete(); return response()->json([ 'success' => true ], 200); } } NoteRequest.php <?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class NoteRequest extends FormRequest { public function authorize() { return true; } public function rules() { return [ 'title', 'required|max:255|min:3', 'content', 'nullable|max:255|min:10', ]; } } Note.php（模型） <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Note extends Model { use HasFactory; protected $guarded = []; } api.php <?php use App\Http\Controllers\NoteController; use Illuminate\Support\Facades\Route; Route::prefix('v1')->group(function () { Route::resource('/note', NoteController::class); }); php artisan 路线：列表 GET|HEAD / ...................................................................................................................... POST _ignition/execute-solution ............... ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolutionController GET|HEAD _ignition/health-check ........................... ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckController POST _ignition/update-config ........................ ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigController GET|HEAD api/v1/note .......................................................................... note.index › NoteController@index POST api/v1/note .......................................................................... note.store › NoteController@store GET|HEAD api/v1/note/create ................................................................. note.create › NoteController@create GET|HEAD api/v1/note/{note} ..................................................................... note.show › NoteController@show PUT|PATCH api/v1/note/{note} ................................................................. note.update › NoteController@update DELETE api/v1/note/{note} ............................................................... note.destroy › NoteController@destroy GET|HEAD api/v1/note/{note}/edit ................................................................ note.edit › NoteController@edit GET|HEAD sanctum/csrf-cookie .................................. sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show 迅雷请求（同邮递员） JSON 请求 { "title": "Hello World", "content": "Lorem ipsum." } 尝试发出 JSON POST 请求并获取状态：405 方法不允许并且我正在使用 php artisan 服务，如果需要，我可以提供 GIT 项目。请告诉我。 您的验证规则看起来不正确。在您的 NoteRequest 类中，规则应该是一个关联数组，其中键是字段名称，值是验证规则。但是，在您的代码中，规则被定义为以逗号分隔的字符串列表。这可能会导致验证失败并返回 405 Method Not allowed 错误。 public function rules() { return [ 'title' => 'required|max:255|min:3', 'content' => 'nullable|max:255|min:10', ]; }
这是一个基本组件。 和 都有 onClick 函数。我只想触发 上的 onClick，而不是 。我怎样才能实现这个目标？ 我玩过 这是一个基本组件。 <ul> 和 <li> 都有 onClick 函数。我只想触发 <li> 上的 onClick，而不是 <ul>。我怎样才能实现这个目标？ 我尝试过 e.preventDefault()、e.stopPropagation()，但无济于事。 class List extends React.Component { constructor(props) { super(props); } handleClick() { // do something } render() { return ( <ul onClick={(e) => { console.log('parent'); this.handleClick(); }} > <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} > </li> </ul> ) } } // => parent // => child 我也有同样的问题。我发现 stopPropagation did 有效。我会将列表项拆分为一个单独的组件，如下所示： class List extends React.Component { handleClick = e => { // do something } render() { return ( <ul onClick={this.handleClick}> <ListItem onClick={this.handleClick}>Item</ListItem> </ul> ) } } class ListItem extends React.Component { handleClick = e => { e.stopPropagation(); // <------ Here is the magic this.props.onClick(); } render() { return ( <li onClick={this.handleClick}> {this.props.children} </li> ) } } React 使用事件委托和文档上的单个事件侦听器来处理冒泡事件，例如本例中的“单击”，这意味着不可能停止传播；当您在 React 中与真实事件交互时，真实事件已经传播。 React 的合成事件上的 stopPropagation 是可能的，因为 React 在内部处理合成事件的传播。 stopPropagation: function(e){ e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); } 关于 DOM 事件的顺序：CAPTURING vs BUBBLING 事件传播有两个阶段。这些被称为 “捕获” 和 “冒泡”。 | | / \ ---------------| |----------------- ---------------| |----------------- | element1 | | | | element1 | | | | -----------| |----------- | | -----------| |----------- | | |element2 \ / | | | |element2 | | | | | ------------------------- | | ------------------------- | | Event CAPTURING | | Event BUBBLING | ----------------------------------- ----------------------------------- 首先发生捕获阶段，然后是冒泡阶段。当您使用常规 DOM api 注册事件时，默认情况下事件将成为冒泡阶段的一部分，但这可以在事件创建时指定 // CAPTURING event button.addEventListener('click', handleClick, true) // BUBBLING events button.addEventListener('click', handleClick, false) button.addEventListener('click', handleClick) 在React中，冒泡事件也是你默认使用的。 // handleClick is a BUBBLING (synthetic) event <button onClick={handleClick}></button> // handleClick is a CAPTURING (synthetic) event <button onClickCapture={handleClick}></button> 让我们看一下handleClick回调（React）： function handleClick(e) { // This will prevent any synthetic events from firing after this one e.stopPropagation() } function handleClick(e) { // This will set e.defaultPrevented to true // (for all synthetic events firing after this one) e.preventDefault() } 我在这里没有看到提到的替代方案 如果您在所有事件中调用 e.preventDefault()，您可以检查事件是否已被处理，并防止再次处理它： handleEvent(e) { if (e.defaultPrevented) return // Exits here if event has been handled e.preventDefault() // Perform whatever you need to here. } 关于合成事件和原生事件的区别，请参阅React文档：https://reactjs.org/docs/events.html 这是防止单击事件前进到下一个组件然后调用 yourFunction 的简单方法。 <Button onClick={(e)=> {e.stopPropagation(); yourFunction(someParam)}}>Delete</Button> 这不是 100% 理想，但如果在儿童中传递 props 太痛苦 -> 儿童时尚或为此目的创建 Context.Provider/Context.Consumer just），你正在处理另一个库，它有自己的处理程序，它在您的处理程序之前运行，您也可以尝试： function myHandler(e) { e.persist(); e.nativeEvent.stopImmediatePropagation(); e.stopPropagation(); } 据我了解，event.persist方法可以防止对象立即被扔回React的SyntheticEvent池中。因此，当你伸手去拿 React 中传递的 event 时，它实际上并不存在！这种情况发生在孙子中，因为 React 在内部处理事情的方式是首先检查父进程是否有 SyntheticEvent 处理程序（特别是如果父进程有回调）。 只要您不调用 persist 来创建大量内存以继续创建诸如 onMouseMove 之类的事件（并且您没有创建某种 Cookie Clicker 游戏，例如 Grandma's Cookies），就应该完全没问题！ 另请注意：偶尔阅读他们的 GitHub，我们应该密切关注 React 的未来版本，因为他们可能最终会解决一些问题，因为他们似乎打算在编译器中折叠 React 代码/转译器。 如果您希望发生嵌套元素中的操作而不是父元素中的操作，那么，您可以从父元素的操作处理程序中检查目标的类型，然后基于该类型执行操作，即，如果目标是我们的嵌套元素，我们什么也不做。否则两个处理程序都会被调用。 // Handler of the parent element. Let's assume the nested element is a checkbox function handleSingleSelection(e) { if(e.target.type !== 'checkbox') { // We do not do anything from the // parent handler if the target is a checkbox ( our nested element) // Note that the target will always be the nested element dispatch(lineSelectionSingle({ line })) } } 我在 event.stopPropagation() 工作时遇到问题。如果您也这样做，请尝试将其移动到单击处理程序函数的顶部，这就是我需要做的来阻止事件冒泡。示例函数： toggleFilter(e) { e.stopPropagation(); // If moved to the end of the function, will not work let target = e.target; let i = 10; // Sanity breaker while(true) { if (--i === 0) { return; } if (target.classList.contains("filter")) { target.classList.toggle("active"); break; } target = target.parentNode; } } 您可以通过检查事件目标来避免事件冒泡。 例如，如果您将输入嵌套到 div 元素，其中有单击事件的处理程序，并且您不想处理它，则单击输入时，您可以将 event.target 传递到您的处理程序中，并检查处理程序应该是根据目标的属性执行。 例如，您可以检查 if (target.localName === "input") { return}。 所以，这是一种“避免”处理程序执行的方法 解决此问题的另一种方法可能是在子级上设置 onMouseEnter 和 onMouseLeave 事件。 （您的 < li > 标签） 每当鼠标悬停在子级上时，您都可以设置一个特定的状态，以阻止父级执行 onClick 函数内容。 比如： class List extends React.Component { constructor(props) { super(props) this.state.overLi = false } handleClick() { // do something } render() { return ( <ul onClick={(e) => { if (!this.state.overLi) { console.log("parent") this.handleClick() } }} > <li onClick={(e) => { console.log("child") // prevent default? prevent propagation? this.handleClick() }} onMouseEnter={() => this.setState({ overLi: true, }) } onMouseLeave={() => this.setState({ overLi: false, })} ></li> </ul> ) } } 我进行了很多搜索，但没有设法使用 e.stopPropagation() 为我的上下文实现任何解决方案 您可以验证点击的元素是否是预期的元素。 例如： class List extends React.Component { constructor(props) { super(props); } handleClick(e) { if(e.target.className==='class-name'){ // do something } } render() { return ( <ul {/* Replace this with handleClick */} onClick={(e) => { console.log('parent'); this.handleClick(); }} <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} </li> </ul> ) } } 执行此操作的新方法更加简单，并且会节省您一些时间！只需将事件传递到原始点击处理程序并调用 preventDefault();。 clickHandler(e){ e.preventDefault(); //Your functionality here }