React-Toolbox RadioGroup onChange doesn't work

Question

I'm trying to set up radioButtons in my react application using the react-toolbox radio buttons https://github.com/react-toolbox/react-toolbox/tree/dev/components/radio.

This is my code:

import {RadioGroup, RadioButton} from 'react-toolbox/lib/radio';

class ClientsEdit extends Component {
    constructor(props) {
        super(props);
        this.bindLibs();

        this.state = {
            counterType: 1
        };
    }

   // Some other functions

    render() {
        return (
            <div>
                 <RadioGroup name='counterType' value={this.state.counterType} onChange={this.handleRadioButtonChange}>
                    <RadioButton label={t('clients:new.numeric')} value={1}/>
                    <RadioButton label={t('clients:new.alphanumeric')} value={2}/>
                 </RadioGroup>
            </div>
        );
    }

    bindLibs= () => {
    // ...
        this.handleRadioButtonChange = handleRadioButtonChange.bind(this);
    }
}

There are two problems:

No radioButton is checked although I'm declaring this.state.counterType to be 1
When trying to change the state (by clicking) the onChange isn't triggered

Using Strings instead of integers doesn't solve the problem either. What am I doing wrong here? Thanks!

score 1 · Answer 1 · answered Aug 01 '17 at 13:51

1

As far as I'm aware since you are not setting 'value' in your state it will not check any radio button. Also since you have not specified the 'handleRadioButtonChange', I would recommend just defining it in the current component like this

handleRadioButtonChange = (value) => {
  this.setState({value});
};

Look at the example given in the readme here : https://github.com/react-toolbox/react-toolbox/tree/dev/components/radio

answered Aug 01 '17 at 13:51

BanelingRush

92
7

I exported the handleRadioButtonChange from a different file. That shouldn't be the problem. It doesn't even call the onChange. Naming the attribute `value` doesn't work either – Nocebo Aug 01 '17 at 13:57
Yes because the way that it triggers is based on the `value` attribute of the button. For the handleRadioButtonChange instead of running it in a seperate bindLib function I would then recommend just running it directly inside the constructor. – BanelingRush Aug 01 '17 at 14:00
hmmm, you shouldn't require it to be only value it should work with any state variable but it seems like your function is not being bound to the component correctly. – BanelingRush Aug 01 '17 at 14:03
It also works with custom attributes like in the snippet above https://codesandbox.io/s/o2ORxVRzk. Doing this: `onChange={() => { console.log("Test");}}` results in no console log at all. The changeHandler shouldn't be the problem if I'm not even able to trigger the `onChange` function – Nocebo Aug 01 '17 at 14:09

Piyush Dhamecha · Answer 2 · 2017-08-01T14:05:43.710

1

You should use string instead of number in value

import React,{Component} from 'react';
import {RadioGroup, RadioButton} from 'react-toolbox/lib/radio';

class ClientsEdit extends Component {
    constructor(props) {
        super(props);
        this.handleRadioButtonChange = this.handleRadioButtonChange.bind(this);
        this.state = {
            counterType: '1' // changed
        };
    }

    handleRadioButtonChange(e){
       this.setState({
       counterType:e
     })
    }
    render() {
        return (
            <div>
                 <RadioGroup name='counterType' value={this.state.counterType} onChange={this.handleRadioButtonChange}>
                    <RadioButton label={'first'} value={'1'}/>  // changed
                    <RadioButton label={'last'} value={'2'}/>    // changed
                 </RadioGroup>
            </div>
        );
    }

}

export default ClientsEdit

Check this online snippet link

edited Aug 01 '17 at 14:05

answered Aug 01 '17 at 13:58

Piyush Dhamecha

1,485
1
13
22

The snippet also works with integers. I believe there's a problem with some other imports, since copying the snippet doesn't work with my app – Nocebo Aug 01 '17 at 14:05
for `integer` it works like direct value, i think that's why it skips the binding. – Piyush Dhamecha Aug 01 '17 at 14:07
@Nocebo yes bro.. its working fine with `integer`,[Check this snippet](https://codesandbox.io/s/o2ORxVRzk) – Piyush Dhamecha Aug 01 '17 at 14:09
Yeah exactly, that's what I changed as well. I'm using all kinds of react-toolbox components with even more complex changeHandlers and dozens of imports. The only component that doesn't work, even when simplified to a ridiculous extent, is the radioGroup. That's what bothers me the most :D – Nocebo Aug 01 '17 at 14:13
Not getting any error. Clicking on the buttons simply doesn't work. As if they were disabled – Nocebo Aug 01 '17 at 14:13
I can't chat yet :/ I know the snippet is working fine, that's what bothers me :D https://codesandbox.io/s/W6Nqq6BKv look at this snippet. That's what I'm doing in my app, however my onChange isn't even triggered. No error, no warning, nothing – Nocebo Aug 01 '17 at 14:18
@Nocebo I think there is one problem in your code , replace `this.handleRadioButtonChange = handleRadioButtonChange.bind(this);` with `this.handleRadioButtonChange = this.handleRadioButtonChange.bind(this);`. `this` is missing while binding function. – Piyush Dhamecha Aug 01 '17 at 14:23
and second is what `t` stands for in `` – Piyush Dhamecha Aug 01 '17 at 14:26
That throws a runtime error. I'm not even using this function at the moment. I'm just doing a console.log() and it doesn't work.. Importing my component into the snippet works, but I had to remove a lot of imports. Maybe one of them is causing the radioButtons not to work – Nocebo Aug 01 '17 at 14:27
Thats an i18n function. For multi-language purposes – Nocebo Aug 01 '17 at 14:27
Try and use normal `string` instead of `i18n` function. – Piyush Dhamecha Aug 01 '17 at 14:29
I did, nothing changed. Mhm I guess I'm looking at my imports again. I'm pretty certain that it has nothing to do with my changeHandler or value-setting. I'm not even changing any value, just printin on a onChange doesn't even work. But thanks for your time, I appreciate it! – Nocebo Aug 01 '17 at 14:32
if you don't mind.. give me access to you pc.. TV or anydesk ? so i can able to figure out the issue.. – Piyush Dhamecha Aug 01 '17 at 14:34
Have to leave. I'm going to look at this tomorrow again. If I can fix the bug I let you know. Have a nice day – Nocebo Aug 01 '17 at 14:35
I believe I found the issue: https://github.com/react-toolbox/react-toolbox/issues/1368. Still not working with the current version though :D Anyway, thank you for your time! – Nocebo Aug 02 '17 at 06:34
I already did yesterday. My reputation was too low to see it publicly ;) – Nocebo Aug 02 '17 at 13:18

React-Toolbox RadioGroup onChange doesn't work

2 Answers2