Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

get more then value in the handleChange func #53

Open
YosiLeibman opened this issue Dec 9, 2018 · 3 comments
Open

get more then value in the handleChange func #53

YosiLeibman opened this issue Dec 9, 2018 · 3 comments

Comments

@YosiLeibman
Copy link

I have dynamically outputed radio groups, every group gets unique name.
in the handleChange func I need get the name in addition to value. my state is a pair of
{ {groupName} : {selectedValue} }
there's a way to get the name somehow?

@marvincolgin
Copy link

marvincolgin commented Mar 27, 2019

In regards to getting more information passed to handleChange()... I'm not 100% sure if this is good practice, but you can interrogate the following property in the DOM and it appears to have the correct GroupName::name...

document.activeElement.name

@mdodge-ecgrow
Copy link

Thanks @marvincolgin! That worked for me. Although it does feel very "hacky". I'm hoping I can eventually find a better way like passing the actual input RadioGroup name to the function. handleChange(name) I did try that and it does not work.

@mdodge-ecgrow
Copy link

mdodge-ecgrow commented Jan 10, 2020

OK, so I was playing around with this some more and I think I figured out a better way. This is what worked for me.
Here is my RadioGroup:

<RadioGroup
  name={'infoCorrect'}
  selectedValue={userInput.infoCorrect}
  onChange={(val) => handleRadioChange(val, 'infoCorrect')}
>
<label className={'radio'}>
  <Radio value={'yes'} />Yes
</label>
<label className={'radio ml-5'}>
  <Radio value={'no'} />No
</label>
</RadioGroup>

And here is my handleRadioChange:

const handleRadioChange = (val, name) => {
  setUserInput({ [name]: val });
};

And if anyone is curious about where setUserInput is coming from:

const [userInput, setUserInput] = useReducer(
  (state, newState) => ({ ...state, ...newState }),
  initialState
);

I could be wrong here, but I think ultimately, it should be the job of the RadioGroup onChange handler to automatically pass the name along with the value. Would this be very hard to add into the library? I would think it would be the second parameter so the user could just ignore it in the function if they don't need it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants