HTML onSubmit / onClick 处理函数可以有除事件之外的其他参数吗? [复制]

2024-02-13

我面临一些案例onClick or onSubmit功能需要两者event and parameter。 我可以在 React 或普通 html 标签中使用它吗?

或者,只是使用其他函数做一些副作用?


const CustomFC = ({}) => {
  const [ id, setId] = useState("");
  const [password, setPassword] = useState("");
  
  type FormParams = {
    id: string;
    password: string; 
  }
  const customClickHandler = useCallback((params: FormParams) => 
  {
    dispatch(params); 
  }, [id, password]);

  const onChangeId = useCallback((id) => setId(id),[]);
  const onChangePassword = useCallback((password) => setPassword(password),[]);   
  
  <Form
     onClick ={customClickHandler}
     onChange={{onChangeId, onChangePassword}}
  />
}

// Form.tsx
const Form = ({
  onSubmit,
  onChange,
}) => {
  const { onChangeId, onChangePassword } = onChange; 
  const handleSubmit = ( e, params ) => { // <- can this be possible? 
    e.preventDefault();
    onSubmit(params);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input ... />
      <input ... />
    </form>
  )
}
  

任何本机事件处理程序都只有一个event参数,但您可以使用本机处理程序来调用具有自定义参数的第二个函数:

document.querySelector("button").addEventListener("click", function(event){
  actualHandler(event, this.id, this.dataset.test, this.className);
});

function actualHandler(event, id, dataTest, classList){
  console.log(event.type, id, dataTest, classList);
}
<button id="btn" data-test="foo" class="bar">Click Me</button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML onSubmit / onClick 处理函数可以有除事件之外的其他参数吗? [复制] 的相关文章

  • 正则表达式中的“g”标志是什么意思?

    的含义是什么g正则表达式中的标志 之间有什么区别 g and g用于全局搜索 这意味着它将匹配所有出现的情况 通常你还会看到i这意味着忽略大小写 参考 全局 JavaScript MDN https developer mozilla or
  • Vue.JS 2.5.1:未捕获的语法错误:意外的令牌导出

    我试图使用 VueJS 和 Bootstrap Vue 制作一个单选按钮 但是当我制作它时发生了这种情况 我预计这是语法错误 就像它所说的那样 但我似乎找不到任何线索 所以我尝试复制粘贴代码 这是 test radio php 的完整代码
  • jQuery UI sortable 和 contenteditable=true 不能一起工作

    我正在创建一个列表并希望使其项目可排序和可编辑 所以我这样做 ul li span A span li li span B span li li span C span li ul ul list sortable http jsfiddl
  • 缓存 firestore 中 get 的第一个实现

    我希望 firestore 每次都先从缓存中获取数据 根据 Firestore 文档 传递 缓存 或 服务器 选项必须启用相同的功能 下面的例子 db collection cities where capital true get cac
  • ngx-DataTable 对列进行排序无法正常工作 Angular 4

    虽然我对角度非常陌生 但我在使用 ngx DataTable 时遇到了一些困难 我使用简单的 ngx DataTable 进行简单的操作 问题出在列上 尽管我已将 attr 声明为 sortable true 但排序不起作用 这是代码 表定
  • jQuery 验证日期范围问题

    我的代码中有很多地方有成对的相关开始和结束日期字段 范围 我需要验证开始日期早于结束日期 我正在使用 jQuery 验证插件 这是我的代码 http jsfiddle net jinglesthula dESz2 http jsfiddle
  • 在 IE10 中禁用捏合放大

    在 IE10 触摸模式下 我希望仅使页面的特定部分可缩放 其余的不应该 我找到了这个 http msdn microsoft com en US library ie hh772044 aspx http msdn microsoft co
  • 改进 D3 序列旭日示例

    This D3示例作为我的出发点 http bl ocks org kerryrodden 7090426 http bl ocks org kerryrodden 7090426 我想更改提供图表的数据 并且我做了以下新示例 http j
  • 将 Google 电子表格解析为 Javascript 数组

    我有一个 Google 电子表格 https docs google com spreadsheets d e 2PACX 1vRc8Lx0N wf3f1xAAXkNFUqQjaWPFcde3YjK02gCBqGpUrULwHC6NC0sn
  • EJS在JS onload函数中访问express变量

    我知道你可以像这样获取 ejs 文件中变量的值 h1 h1 如果我要在同一个 ejs 页面的 onload javascript 函数中使用相同的标题变量 我将如何使用它 例如 这个函数产生一个控制台错误说 未捕获的语法错误 意外的标识符
  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • JavaScript:预期的赋值或函数调用,却看到了一个表达式

    我正在使用 JSHint 来确保我的 JavaScript 是 严格的 但我收到以下错误 预期是赋值或函数调用 但看到的是表达式 关于以下代码 var str A B C D var data var strArr str split fo
  • 如何生成 JavaScript 堆栈跟踪? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 关于如何以跨浏览器的方式在 javascript 中生成堆栈跟踪有什么建议吗 较新的浏览器 Chrome 和 Firefox 公开了一个允
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 父指令属性更改时子指令不会更新

    这是对这两个问题的后续 在父指令和子指令之间传递参数 https stackoverflow com questions 42814530 pass argument between parent and child directives
  • Javascript:更改输入值时设置光标位置

    当您输入公式时 我试图在我的应用程序中重现类似于 Microsoft Excel Google Sheets 的用户体验 并且您可以使用不同的公式和变量来自动完成下拉菜单 为此 在验证自动完成功能后 我希望能够控制光标的位置 例如 如果我输
  • 数字和小数的输入掩码

    在测试我的程序后 我发现了以下错误 我在 sqlserver 中的表包含 价格数字 6 2 我的程序的用户输入价格 555 00 就很好了 但是当他输入 555555 时 这是错误的 所以我需要指定掩码 其中尾数是可选的 0 到 999 小
  • 跨浏览器:禁用输入字段的不同行为(文本可以/不能复制)

    我有一个被禁用的输入 html 字段 在某些浏览器 Chrome Edge Internet Explorer 和 Opera 中可以选择并复制文本 但至少在 Firefox 中这是不可能的 您可以通过在不同浏览器中执行以下代码来测试
  • 使用 JavaScript onclick 添加表格行

    我正在尝试使用 javascript 添加下面找到的完全相同的元素 我已经尝试了这里找到的所有解决方案 我什至尝试用php echo但没有运气 无需更改任何输入名称或类似内容 只需单击该按钮即可向表中添加另一行 仅此而已 这是该元素 tr

随机推荐

  • SQL Server 2016_无法启动镜像

    将SQL Server 2014升级到SQL Server 2016 都是企业版 后 我无法启动镜像 这在 SQL Server 2014 上正常工作 我恢复后 WITH NORECOVERY 镜像数据库 包含我通常运行的主数据库的完整备份
  • 如何强制 Iframe 在标准父框架下运行怪异

    我们有一个父页面必须在 IE9 标准模式下运行 执行 HTML5 命令 下面我们有一个必须在兼容模式 IE7 8 下运行的 iframe 据我了解 在 IE9 中 iframe 继承了父级的文档类型 那是对的吗 这个问题有什么解决办法吗 不
  • 将附加参数传递给 python 回调对象 (win32com.client.dispatchWithEvents)

    我正在使用 win32com 包与 Windows 应用程序交互 应用程序并不重要 简而言之 我想要实现的是订阅更新的表 我已经成功实现了一个回调 该回调接收表更新时返回的数据 但我现在需要的是对收到的数据采取行动 如果我可以使用附加参数实
  • VHDL - iSIM 输出未初始化,不改变状态

    您好 我是一位 Xilinx 新用户 在如何在测试台中编写激励 模拟方面遇到了麻烦 我的输出 Kd 没有给我任何合理的值 并在移动并始终保持在 1 之前的前几个时钟周期给出 u 不确定我是否写了正确的刺激 但希望有人能帮助我 我的VHDL代
  • 空字符串对于 React Link 来说是有效值吗?

    我正在写一个React js http React 20 E2 80 93 20A 20JavaScript 20library 20for 20building 20user 20interfaces 20 20https reactjs
  • 如何在Python中使用将双反斜杠替换为单反斜杠来替换字节字符串

    我想将 Python 中字节字符串的双反斜杠替换为单反斜杠 例如 有一个字节字符串 word b Z xa6 x97 x86j2 x08q r xca xe6m 我需要这个字节字符串 word b Z xa6 x97 x86j2 x08q
  • WPF 类和相应的视觉样式继承

    我已经看过 但显然在与类和样式相关时无法获得正确的语法 我有具有特定行为的控件 我派生出一些来添加额外的行为 现在 我想要一个与每个版本相对应的样式 在最简单的示例中 我将忽略这些类 因为我知道样式与视觉影响具体相关 而不是与功能影响相关
  • 添加 nuget 包源的脚本方式

    我们想要启动一个公司 nuget 包存储库 有没有办法通过命令行添加包源 以便我们可以通过设置或其他方式配置新的包源 我们基本上不想去 工具 选项 包管理器 包源 加号按钮 添加名称和来源 在公司的每台开发人员机器上 包源存储在用户配置文件
  • 如何获取 boto3 集合的大小?

    我一直使用的方法是将Collection转换为List并查询长度 s3 boto3 resource s3 bucket s3 Bucket my bucket size len list bucket objects all 然而 这会强
  • 用颜色条调整子图

    I have made the following visualization I am at loss to figure out how to adjust the size of the third subplot according
  • 防止 $anchorScroll 修改 url

    我在用 anchorScroll https docs angularjs org api ng service 24anchorScroll滚动到 html 元素具有 ID 的页面顶部 brand
  • Spring MVC @RequestMapping 继承

    来自 Struts2 我习惯于声明 Namespace超类上的注释 或package info java 并且继承类随后将获取中的值 Namespace其祖先的注释并将其添加到操作的请求路径之前 我现在正在尝试使用 Spring MVC 做
  • 两个几乎相同的批处理脚本之一中存在语法错误:“)”无法在此处进行语法处理

    我正在尝试设置 Jenkins 服务器来自动构建 Unity 因此 我编写了两个 在我看来 基本相同的批处理脚本 这两个脚本均由 Jenkins 通过Execute Windows batch command步骤使用 Command E u
  • chrome.identity.getProfileUserInfo() 返回空 ID [重复]

    这个问题在这里已经有答案了 我不知道这是否只是开发问题 因为我还没有发布我的扩展 getProfileUserInfo 返回 email id 我是否登录 chrome 并不重要 这是我的清单中的权限 permissions activeT
  • 如何在 MVC 中获取站点的基本 url [重复]

    这个问题在这里已经有答案了 我想向用户发送一封电子邮件 他可以在其中单击链接以转移到我的网站 我不想在我的电子邮件模板中对 URL 进行硬编码 我想要这种动态 无论环境如何 它都会发送相关的 url 就像如果我在开发环境中它会发送类似的内容
  • 在 python 中创建漂亮的列输出

    我正在尝试在 python 中创建一个漂亮的列列表 以便与我创建的命令行管理工具一起使用 基本上 我想要一个类似的列表 a b c aaaaaaaaaa b c a bbbbbbbbbb c 变成 a b c aaaaaaaaaa b c
  • 在 iOS 版 Chrome 上拦截 AJAX 请求?

    我通过更改来拦截我网站中的 AJAX 请求XMLHttpRequest prototype open and send方法 这种方法在我测试的所有浏览器中都没有任何问题 然而 当涉及 iOS iPhone 版 Chrome 时 代码有一个最
  • 带有引用元组的结构化绑定引用

    The cppreference 中的结构化绑定案例2 https en cppreference com w cpp language structured binding有点难以理解 基本上 我想澄清这些情况 int x 1 doubl
  • Windows 上的 Git GUI:合并冲突

    我在命令行上能熟练使用 Git 但对于特定项目 我需要向其他人展示如何专门在 GUI 环境中执行操作 我们正在使用 Windows 版 Git 可在https git scm com download win https git scm c
  • HTML onSubmit / onClick 处理函数可以有除事件之外的其他参数吗? [复制]

    这个问题在这里已经有答案了 我面临一些案例onClick or onSubmit功能需要两者event and parameter 我可以在 React 或普通 html 标签中使用它吗 或者 只是使用其他函数做一些副作用 const Cu