在我的組件中，我有：
<StyledPill
key={`styled-pill-${idx}`}
size="small"
label={searchType.label}
onClick={() => handleClick(idx 1)}
featured={selectedSearchType === idx 1}
/>
在哪里：
const handleClick = (index: number) => {
setSelectedSearchType(index);
};
但是，有人告訴我我們不想使用匿名函式() => handleClick(idx 1)。有沒有一些有效的方法來避免它？
我不能這樣做onClick={handleClick}，因為那樣我就無法通過論點。
尋求一些幫助 - 任何將不勝感激。謝謝！
uj5u.com熱心網友回復：
您可以避免為每個元素創建匿名處理程式，方法是使每個專案的資料在元素上可用，并在事件處理程式中讀取它。
但是，這是您可能不需要的過早優化。
function Component({ searchTypes, selectedSearchType, handleClick }) {
const handleItemClick = React.useCallback((event) => {
const itemId = parseInt(event.target.dataset.index);
handleClick(itemId);
}, [handleClick]);
return (
<>
{searchTypes.map((searchType, idx) => (
<StyledPill
key={`styled-pill-${idx}`}
size="small"
label={searchType.label}
data-index={idx 1}
onClick={handleItemClick}
featured={selectedSearchType === idx 1}
/>
))}
</>
);
}
uj5u.com熱心網友回復：
嗯，如果您真的想這樣做并且可以訪問該StyledPill組件，則可以選擇接受onClick和作為道具，然后撰寫一個包裝函式來index呼叫onClick.index
<StyledPill
key={`styled-pill-${idx}`}
size="small"
label={searchType.label}
onClick={handleClick}
index={idx 1}
featured={selectedSearchType === idx 1}
/>
// StyledPill.jsx
function StyledPill({onClick, index}) {
function handleOnClick() {
onClick(index);
}
return (
<button onClick={handleOnClick} .../>
)
}
uj5u.com熱心網友回復：
如果您只想將命名函式傳遞給處理程式，則可以在回呼onClick中定義該函式：map()
function Component({ searchTypes, selectedSearchType, handleClick }) {
const handleClick = (index: number) => {
setSelectedSearchType(index);
};
return (
<>
{searchTypes.map((searchType, idx) => {
const handlePillClick = () => handleClick(idx 1);
return (
<StyledPill
key={`styled-pill-${idx}`}
size="small"
label={searchType.label}
data-index={idx 1}
onClick={handlePillClick}
featured={selectedSearchType === idx 1}
/>
);
})}
</>
);
}
uj5u.com熱心網友回復：
您可以像這樣實作，這也稱為無點樣式
const handleClick = (index: number) => () => {
setSelectedSearchType(index);
};
// ...
<StyledPill
key={`styled-pill-${idx}`}
size="small"
label={searchType.label}
onClick={handleClick(idx 1)}
featured={selectedSearchType === idx 1}
/>
Codesandbox 演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/504879.html
標籤：javascript 反应 匿名函数
上一篇：從記錄中拉出一個號碼到號碼