Select to view content in your preferred language

Calcite Radio Button events

106
1
Jump to solution
Tuesday
MichelleStuart
Occasional Contributor

I feel like I must be missing something staring me right in the face, but when I copy the code from the calcite website for the radio button group into react, add an oncalciteRadioButtonGroupChange event listener, and console log the event.target.value, I get undefined.  If I log the event, I cannot see any hint of which radio button was clicked to trigger the event. 

What am I missing?

 

 const handleSelection = (evt) => {
        console.log('group change', evt.target.value)
    }

    return (
                <calcite-radio-button-group oncalciteRadioButtonGroupChange={handleSelection} name="impairment" layout="vertical">
                    <calcite-label layout="inline">
                        <calcite-radio-button checked={selectedImpairment === 'phosphorus'} value="phosphorus"></calcite-radio-button>
                        Phosphorus
                    </calcite-label>
                    <calcite-label layout="inline">
                        <calcite-radio-button checked={selectedImpairment === 'fecal-indicator-bacteria'} value="fecal-indicator-bacteria"></calcite-radio-button>
                        Fecal indicator bacteria
                    </calcite-label>
                    <calcite-label layout="inline">
                        <calcite-radio-button checked={selectedImpairment === 'biological-integrity'} value="biological-integrity"></calcite-radio-button>
                        Biological integrity
                    </calcite-label>
                </calcite-radio-button-group>
            

 

0 Kudos
1 Solution

Accepted Solutions
MichelleStuart
Occasional Contributor

Mel let me know the solution!  Instead of using event.target.value, use event.target.selectedItem.value.  

View solution in original post

0 Kudos
1 Reply
MichelleStuart
Occasional Contributor

Mel let me know the solution!  Instead of using event.target.value, use event.target.selectedItem.value.  

0 Kudos