MDBInput OnClick event not getting triggered


Topic: MDBInput OnClick event not getting triggered

gaurav soni pro asked 6 years ago

onClick event is not getting triggered on the Radio button onClick

Example code -

<MDBInput
  getValue={()=>this.setEmploymentStatus(1)}
  checked={this.state.employmentStatus === 1 ? true : false}
  label="Default unchecked"
  type="radio"
/>

Aliaksandr Andrasiuk staff answered 6 years ago

Hello,

In your code snippet there is no usage of onClick method.

What behavior do you want to achieve and can you show me the full code of your application, so I could help you?

Best regards.


Srinivas K answered 5 years ago

in my case also none of the events are firing on the radio button

         <MDBInput
                            onChange={testChange("M")}
                            getValue={testGetValue("M")}
                            onClick={testGetValue}
                            size="sm"
                            value="M"
                            label="Male" type="radio">

              </MDBInput>

my handlers

 const testChange = (name) => (event) => {
    console.log("onChange", name, event.target.checked)
}

const testGetValue = (value) => {
    console.log("getValue", value)
}

Konrad Stępień staff answered 5 years ago

Hi @Srinivas K

I did change your code for a correctly working example. Please check my code and tell me if the problem still exists.

Best regards, Konrad.

import React, { Component } from 'react';
import { MDBContainer, MDBInput } from 'mdbreact';

class RadioTest extends Component {
  state = {
    radio: 'f'
  };

  testGetValue = value => () => {
    console.log(value);
    this.setState({
      radio: value
    });
  };

  testChange = name => {
    console.log('onChange', this.state.radio, name.target.checked);
  };

  render() {
    return (
      <MDBContainer className='mt-5'>
        <MDBInput
          label='Male'
          type='radio'
          id='radio1'
          onClick={this.testGetValue('m')}
          checked={this.state.radio === 'm' ? true : false}
          onChange={this.testChange}
        />
        <MDBInput
          label='Female'
          type='radio'
          id='radio2'
          checked={this.state.radio === 'f' ? true : false}
          onClick={this.testGetValue('f')}
          onChange={this.testChange}
        />
      </MDBContainer>
    );
  }
}

export default RadioTest;

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.13.0
  • Device: MAC
  • Browser: Chrome
  • OS: MAC
  • Provided sample code: No
  • Provided link: No
Tags