我有這樣的代碼
const dailyRef = createRef();
const monthlyRef = createRef();
const annuallyRef = createRef();
const handleBillingCycleClick = ({target}) => {
const value = target.dataSet.value
// assign an attribute value (backgroundColor) to the clicked button
// how to know the clicked button ref here?
// I want to have access to the clicked button ref, so I can do something like this:
// CLICKED-BUTTON-REF.current.variant = "contained" .ie. <Button variant='contained'>
}
<FormControl>
<Typography variant="overline" sx={{ fontWeight: 'fontWeightBold' }}>
Billing cycle
</Typography>
<ButtonGroup variant="outlined" onClick={handleBillingCycleClick}>
<Button ref={dailyRef} data-value="daily">Daily</Button>
<Button ref={monthlyRef} data-value="monthly">Monthly</Button>
<Button ref={annuallyRef} data-value="annually">Annually</Button>
</ButtonGroup>
</FormControl>
我將 Material UI 用作組件庫，但不使用它也可以應用相同的概念。
我嘗試執行以下操作，但當然，如果沒有它，它就無法作業eval()：
[${value}Ref].current.variant = 'contained'
uj5u.com熱心網友回復：
您可以按如下方式使用物件：
const myRefs = {
daily: createRef(),
monthly: createRef(),
annually: createRef()
};
const handleBillingCycleClick = ({target}) => {
const value = target.dataSet.value
const reference = myRefs[value];
// now you can use the reference here
}
<FormControl>
<Typography variant="overline" sx={{ fontWeight: 'fontWeightBold' }}>
Billing cycle
</Typography>
<ButtonGroup variant="outlined" onClick={handleBillingCycleClick}>
<Button ref={myRefs.daily} data-value="daily">Daily</Button>
<Button ref={myRefs.monthly} data-value="monthly">Monthly</Button>
<Button ref={myRefs.annually} data-value="annually">Annually</Button>
</ButtonGroup>
</FormControl>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/450517.html
標籤：javascript 反应
上一篇：ReactRouter的v6history.push('/')給出“未定義（讀取'路徑名'）”錯誤-url更改，但頁面保持不變
下一篇：為選擇欄位使用道具資料