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

Complicated to get value from radio button #151

Closed
ButuzGOL opened this issue Dec 15, 2014 · 5 comments
Closed

Complicated to get value from radio button #151

ButuzGOL opened this issue Dec 15, 2014 · 5 comments
Labels
component: button This is the name of the generic UI component, not the React module! component: ButtonGroup The React component. component: radio This is the name of the generic UI component, not the React module!

Comments

@ButuzGOL
Copy link
Contributor

I have two radio buttons and I want to get value for checked

<RadioButton ref="color-red" name="color" value="red" defaultChecked="true" label="Red" />
<RadioButton ref="color-green" name="color" value="green" label="Green" />

Currently I am doing

refs['color-red'].refs.radioButton.getDOMNode().checked

But I think it's complicated
I think solution should be something like

refs.color.getValue()
@rkmax
Copy link
Contributor

rkmax commented Dec 15, 2014

Nor can initially make a choice. I think a different approximation can make easy. could be

{
  _onChange: function(event, value) {
      var updated = {};

      updated[event.target.name] = value;
      this.setState(updated);
  },
  render: function() {
    return (
    <RadioGroupButton ref="shipSpeed" name="shipSpeed" value={this.state.shipSpeed} onChange={this,_onChange}>
        <RadioButton name="choice_1" value="light" label="prepare for light speed"/>
        <RadioButton name="choice_2" value="not_light" label="light speed too slow"/>
        <RadioButton name="choice_3" value="ludicrous" label="go to ludicous speed"/>
    </RadioGroupButton>
    );
  }
}

you can use refs.shipSpeed.getValue()

@dankins
Copy link

dankins commented Dec 16, 2014

I had the same issue and I ended up creating something to help:
https://gist.github.com/dankins/55462150fec4eedc2279
Instead of having child elements like in the example above, instead it accepts a prop with an array of objects containing a value and a label.
This requires the defaultChecked prop that just went out in the latest release (v0.4.0)

I will submit a proper pull request with the code and documentation if it is deemed worthy. In the meantime, you should be able to get something working based on my gist.

@ButuzGOL
Copy link
Contributor Author

Thanks for solutions
Take a look at my https://gist.github.com/ButuzGOL/79e714ea26b201b9fffc I slightly modified from options to jsx style
what do you think ?
The only thing I don't like is setting default value
https://gist.github.com/ButuzGOL/79e714ea26b201b9fffc#file-new-jsx-L24

componentDidMount: function() {
    var defaultValue;
    for (var key in this.props.children) {
      var child = this.props.children[key];
      if (child.props.defaultChecked === 'true') {
        defaultValue = child.props.value;
        break;
      }
    }
    if (defaultValue) this.setValue(defaultValue);
  }

@airtoxin
Copy link

@dankins's RadioButtonGroup is very good. thank you!

@hai-cea
Copy link
Member

hai-cea commented Jan 23, 2015

Fixed with #267

@hai-cea hai-cea closed this as completed Jan 23, 2015
@oliviertassinari oliviertassinari added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 25, 2022
@zannager zannager added component: button This is the name of the generic UI component, not the React module! component: radio This is the name of the generic UI component, not the React module! component: ButtonGroup The React component. and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: button This is the name of the generic UI component, not the React module! component: ButtonGroup The React component. component: radio This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

7 participants