Javascript React hooks onclick事件具有多个参数，而无需重新启动？

我正在使用react钩子和功能组件，我想知道如何向react

onClick

事件添加多个参数

我知道实现这一目标有不同的选择。过去，我在下面使用了这种风格（来自）：

---

在本例中，我喜欢使用的一个技巧是使用

data

属性将参数“绑定”到渲染元素

const myClickFunction = (e) => {
    const value1 = e.currentTarget.getAttribute('data-value1')
    const value2 = e.currentTarget.getAttribute('data-value2')
    const value2 = e.currentTarget.getAttribute('data-value2')
}


// this would trigger rerenders because of the arrow function how do I prevent this?
<button onClick={myClickFunction} data-value1="a" data-value2="b" data-value3="c">
    Click me
</button>

constmyclickfunction=（e）=>{
常量值1=e.currentTarget.getAttribute（'data-value1'）
常量值2=e.currentTarget.getAttribute（'data-value2'）
常量值2=e.currentTarget.getAttribute（'data-value2'）
}
//由于箭头功能，这将触发重新渲染器如何防止？
点击我

通过这种方式，您可以使用

useCallback

安全地记忆函数，并且如果您想将函数传递给子数组，您可以重用相同的函数。这并不理想，您需要将父对象和子对象结合在一起，并且只能使用可序列化为字符串的数据（基本上只有原语）

---

更好的解决方案是将您的值存储在组件树之外的某个位置，这样您就可以在不使用闭包的情况下访问它们（例如，在

redux thunk

中，您不需要传递很多东西，只需通过调用

getState

直接从存储中获取所需的数据即可）

在这种情况下，我喜欢使用的一个技巧是“绑定”使用

数据

属性将参数设置为渲染元素

const myClickFunction = (e) => {
    const value1 = e.currentTarget.getAttribute('data-value1')
    const value2 = e.currentTarget.getAttribute('data-value2')
    const value2 = e.currentTarget.getAttribute('data-value2')
}


// this would trigger rerenders because of the arrow function how do I prevent this?
<button onClick={myClickFunction} data-value1="a" data-value2="b" data-value3="c">
    Click me
</button>

constmyclickfunction=（e）=>{
常量值1=e.currentTarget.getAttribute（'data-value1'）
常量值2=e.currentTarget.getAttribute（'data-value2'）
常量值2=e.currentTarget.getAttribute（'data-value2'）
}
//由于箭头功能，这将触发重新渲染器如何防止？
点击我

通过这种方式，您可以使用

useCallback

安全地记忆函数，并且如果您想将函数传递给子数组，您可以重用相同的函数。这并不理想，您需要将父对象和子对象结合在一起，并且只能使用可序列化为字符串的数据（基本上只有原语）

---

更好的解决方案是将您的值存储在组件树之外的某个位置，这样您就可以在不使用闭包的情况下访问它们（例如，在

redux thunk

中，您不需要传递很多东西，只需通过调用

getState

直接从存储中获取所需的数据即可）

这是否回答了您的问题？它解释了如何绑定函数并与onClick一起使用，同时以旧的ES5方式和新的ES6方式传递参数：这是否回答了您的问题？它解释了如何绑定函数并与onClick一起使用，同时以旧的ES5方式和新的ES6方式传递参数：感谢您的回答！这是一个有趣的方法。这是最佳实践吗？没有别的办法吗？谢谢你的回答！这是一个有趣的方法。这是最佳实践吗？没有别的办法吗？

const myClickFunction = (e) => {
    const value1 = e.currentTarget.getAttribute('data-value1')
    const value2 = e.currentTarget.getAttribute('data-value2')
    const value2 = e.currentTarget.getAttribute('data-value2')
}


// this would trigger rerenders because of the arrow function how do I prevent this?
<button onClick={myClickFunction} data-value1="a" data-value2="b" data-value3="c">
    Click me
</button>