How to get the ref of a component via the JavaScript event propagation?-CodePudding

I have a code like this

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>

I am using Material UI as a components library, but the same concepts will apply without using it.

I tried to do the following but of course, it's not going to work without eval():

[${value}Ref].current.variant = 'contained'

CodePudding user response：

You can use object as follow:

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>