Checkbox/Radio onChange event not returning the standard event object (Only if React-plus-Carbon)

Question

I'm just starting with React, combined with the Carbon Design System from IBM (https://www.carbondesignsystem.com/). My problem is that Checkbox and RadioButton components do not return the same {event} object to my onChange handler as that returned by straight React/JSX. Carbon DOES match React on TextInput and Select components.

The behavior is similar to the issue in React onChange event doesnt return object. However, that is referencing React Toolbox and Material Design, which I am not using.

The difference can be seen in Carbon's online sandbox tool. An example of a radio button is at http://react.carbondesignsystem.com/?selectedKind=RadioButton&selectedStory=Default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel. Click the button and see the results returned in the Action Logger panel. Compare to results of changing (not just clicking) a text input in http://react.carbondesignsystem.com/?selectedKind=TextInput&selectedStory=Default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel. The problem element returns {event} as the third element down, while the good one returns only one element containing the {event} as desired. Apparently, Carbon is only passing along the first element.

Below is the change handler, the ReactJSX, and the resulting HTML.

    handleChange(event) {
        console.log(event)
        const {name, value, type, checked} = event.target
        this.setState({[name]: value}) 
    }

<RadioButton 
    id="gender-male"
    name="gender"
    labelText="Male (Carbon)"
    labelPosition="right"
    value="male"
    checked={this.state.gender === "male"}
    onChange={this.handleChange}
/>

<div class="bx--radio-button-wrapper">
   <input 
      id="gender-male" 
      name="gender" 
      type="radio" 
      class="bx--radio-button" 
      value="male"
   >

   <label for="gender-male" 
      class="bx--radio-button__label" 
      aria-label="Male (Carbon)">
      <span class="bx--radio-button__appearance"></span>
      <span class="">Male (Carbon)</span>
   </label>
</div>

The expected behavior is for Local Scope to contain an event object with properties for name, value, type, checked, etc. But for Carbon's RadioButton and Checkbox, Local Scope contains only a flat text of the element's value, no object at all.

Global Scope does seem to contain the full object. But I hesitate to reference outside of Local, and it seems wrong to have to.

Rallen Rallen · Accepted Answer · 2019-05-01T19:53:41

The following code is straight from the RadioButton component of the carbon-components-react library.

handleChange = evt => {
    this.props.onChange(this.props.value, this.props.name, evt);
};

source

The code shows that the event is passed as the third argument, following the contents of the value and name props of the RadioButton component.

So you should be able to handle changes like this:

handleChange(value, name, event) {
        console.log(event)
        const {type, checked} = event.target // Should not be needed anymore.
        this.setState({[name]: value})
}

Checkbox/Radio onChange event not returning the standard event object (Only if React-plus-Carbon)

1 Answers