Решение React Hooks 2022
const arr = [
{ id: 1, txt: 'One' },
{ id: 2, txt: 'Two' },
{ id: 3, txt: 'Three' },
]
const App = () => {
const handleClick = useCallback(
(id) => () => {
console.log("ID: ", id)
},
[],
)
return (
<div>
{arr.map((item) => (
<button onClick={handleClick(item.id)}>{item.txt}</button>
))}
</div>
)
}
Вы можете передать функцию для возврата useCallback, затем вы можете вызвать свою функцию в обычном режиме при рендеринге, передав ей параметры. Работает как шарм! Просто убедитесь, что вы правильно установили массив зависимостей useCallback.
Лучшее решение с React> = 16
Самый чистый способ, который я нашел для вызова функций с несколькими параметрами в onClick, onChange и т. Д. Без использования встроенных функций, - это использовать настраиваемый атрибут data, доступный в версиях React 16 и выше.
const App = () => {
const onClick = (e) => {
const value1 = e.currentTarget.getAttribute("data-value1")
const value2 = e.currentTarget.getAttribute("data-value2")
const value2 = e.currentTarget.getAttribute("data-value2")
console.log("Values1", value1)
console.log("Values2", value2)
console.log("Values3", value3)
}
return (
<button onClick={onClick} data-value1="a" data-value2="b" data-value3="c" />
)
}
Приведенный выше пример относится к функциональному компоненту, но реализация очень похожа даже в компонентах класса.
Этот подход не приводит к ненужному повторному рендерингу, потому что вы не используете встроенные функции и избегаете проблем с привязкой с помощью this.
Он позволяет передавать столько значений, сколько вы хотите использовать в своей функции.
Если вы передаете значения в качестве свойств своим дочерним элементам, которые будут использоваться в onClick дочернего компонента, вы можете использовать этот подход и там, не создавая функцию-оболочку.
Также работает с массивом объектов в тех случаях, когда вы хотите передать идентификатор из объекта в onClick, как показано ниже.
const App = () => {
const [arrState, setArrState] = useState(arr)
const deleteContent = (e) => {
const id = e.currentTarget.getAttribute("data-id")
const tempArr = [...arrState]
const filteredArr = tempArr.filter((item) => item.id !== id)
setArrState(filteredArr)
}
return (
<div>
{arrState.map((item) => (
<React.Fragment key={item.id}>
<p>{item.content}</p>
<button onClick={deleteContent} data-id={item.id}>
Delete
</button>
</React.Fragment>
))}
</div>
)
}
возможный дубликат привязки события OnClick в React.js
подумайте об использовании себя вместо этого. Это вводит в заблуждение, так как это должно быть синонимом слова "это" (хотя на самом деле это не важно, для каждого свое).
Используя метод привязки и метод стрелки, мы можем передать значение событию Onclick
Согласился с @WiredPrairie, и парень по имени ZenMaster объяснил это точно и эффективно.