如何将道具传递给eventhandler？

将道具传递给event handler可以通过以下几种方式实现：

通过函数参数传递道具：在调用event handler时，将道具作为参数传递给函数。这样，在event handler内部就可以直接使用该道具。例如：

function handleClick(prop) {
  // 使用道具
  console.log(prop);
}

<button onClick={() => handleClick('道具')}>点击按钮</button>

使用闭包：在创建event handler时，可以通过闭包的方式将道具保存在函数内部，并在需要时访问该道具。例如：

function createHandler(prop) {
  return function(event) {
    // 使用道具
    console.log(prop);
  }
}

<button onClick={createHandler('道具')}>点击按钮</button>

使用React的useState钩子：如果你在使用React进行前端开发，可以使用useState钩子来保存道具的状态，并在event handler中访问该状态。例如：

import React, { useState } from 'react';

function Component() {
  const [prop, setProp] = useState('道具');

  function handleClick() {
    // 使用道具
    console.log(prop);
  }

  return (
    <button onClick={handleClick}>点击按钮</button>
  );
}

以上是将道具传递给event handler的几种常见方式。根据具体的开发场景和需求，选择适合的方式即可。

如何将道具传递给eventhandler？

、

如何将每个span与音频字符串关联并将其传递给相同的eventhandlerclickhander(e) { const audio = new Audio('https://s3.amazonaws.com

浏览 23提问于2017-07-04得票数 0

回答已采纳

1回答

如何使用相同的按钮样式但不同的操作(ReactJs)

、、

嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。import React from 'react';import { Link } from 'react-router-dom'; const SIZE

浏览 2提问于2021-03-11得票数 0

1回答

如何防止依赖于回忆录父组件状态的子组件中的不可缺少的重选器

、、、

App具有计算回传值的状态，该值作为道具传递给Option。当状态由于传递给Option的回调而发生变化时，App将被重新命名，从而导致我正在寻找一种使用React我不明白为什么其他子组件，特别是SomeComponent，需要重新命名，而它们的道具没有改变。

浏览 5提问于2022-03-30得票数 0

回答已采纳

1回答

ESLint用于反应:是否有检测需要useMemo的道具的规则？

、、、、

我的子组件是通过回忆录导出的：export default React.memo(MySubComponent) 但是，这会破坏回忆化，因为格式为{.}或{.}的道具每次都会实例化一个新的对象/数组(值相同，但内存地址不同)，因此道具比较浅-- React.memo将其看作不同。有ESLint/JSLint规则来检测这些道具吗?

浏览 2提问于2021-11-30得票数 1

1回答

如何将道具传递给作为元素支柱传递给反应性路由的组件-路由器6？

、

正如标题所述，我想知道如何将道具传递给作为其element支柱传递给路由的React组件。，对于这个代码 <Route path="table" element={<Table />} />如何将道具传递给

浏览 2提问于2021-11-08得票数 0

2回答

从根布局将道具传递给page.jsx子级(next.js 13)

、

如何将道具传递给布局的page.jsx？to this {children} that Im getting from page.jsx*/} </div>} 基本上，如何将道具传递给函数道具

浏览 8提问于2022-11-25得票数 0

回答已采纳

3回答

我是否应该用useCallback或useMemo包装每个道具，什么时候使用这个钩子？

、、

现在可以使用function钩子了，在功能组件的情况下，应该用封装每个函数，用传递每个道具值吗？，如果这提高了性能，为什么不一直这样做呢? }, ); } 在本例中，我甚至将回

浏览 0提问于2019-03-23得票数 42

回答已采纳

3回答

如何传递这个TypeScript反应组件一个可选的道具？

、、

我对TS相当陌生，并试图理解如何将可选的道具传递给这个组件，这对我来说有点复杂。我以为你需要一个？对于您希望成为可选的道具，但我得到了以下错误： export const BGVideo = React.memo(function BGVideo({ src, children, bgColor?

浏览 4提问于2021-06-10得票数 3

回答已采纳

2回答

withFormik，将函数作为道具传递

、、

我正在使用Formik构建一个用户输入表单。我正在使用withFormik处理我的表单。我目前在我的组件中传递我的handleSubmit，如下所示： export const CreateForm = withFormik({ primarySkill: "12" validationSchema: () => FormSchema, setTimeout(() =&g

浏览 17提问于2019-06-24得票数 2

回答已采纳

1回答