CODEWITHSUNDEEP
reactjs
newBike
newBike

Reputation: 15002

Radio button onChange event not firing

The radio buttons won't trigger the onChange event. However, the normal input box can trigger the onChange event.

What's the problem?

handleFormChange(e) {
    debugger
    this.setState({[e.target.name]: e.target.value}, this.showState.bind(this, this.props));
}


<div className="col-md-6 col-sm-6">
    <div className="form-group">
        <label>Name</label>
        <input type="text" className="form-control"
               name="name" value={this.state.name} onChange={this.handleFormChange.bind(this)} />
    </div>
</div>


<div className="form-group">
    <label>Seat type : </label>
    <div className="btn-group" data-toggle="buttons">
        <label className="btn active">
            <input type="radio"
                   name="seat_type"
                   checked={this.state.seat_type==='indoor'}
                   onChange={ e => this.handleFormChange.bind(this)}
                   value={this.state.seat_type}

                   /><i
            className="fa fa-circle-o fa-2x"/><i
            className="fa fa-check-circle-o fa-2x"/><span> Indoor</span>
        </label>
        <label className="btn">
            <input type="radio"
                   name="seat_type"
                   checked={this.state.seat_type==='outdoor'}
                   onChange={ e => this.handleFormChange.bind(this)}
                   value={this.state.seat_type}

            /><i
            className="fa fa-circle-o fa-2x"/><i
            className="fa fa-check-circle-o fa-2x"/><span> Outdoor</span>
        </label>
    </div>
</div>

Updated to the following JSX but still not working.

I can switch the radio option. But not able to trigger handleFormChange callback.

      <div className="btn-group" data-toggle="buttons">
      <label className="btn active">
          <input type="radio"
                 name="seat_type"
                 defaultChecked={this.state.seat_type==='indoor'}
                 onChange={ e => this.handleFormChange.bind(this)}
                 value='indoor'

                 /><i
          className="fa fa-circle-o fa-2x"/><i
          className="fa fa-check-circle-o fa-2x"/><span>321 Indoor</span>
      </label>
      <label className="btn">
          <input type="radio"
                 name="seat_type"
                 defaultChecked={this.state.seat_type==='outdoor'}
                 onChange={ e => { this.handleFormChange.bind(this) } }
                 value='outdoor'
          /><i
          className="fa fa-circle-o fa-2x"/><i
          className="fa fa-check-circle-o fa-2x"/><span> 123Outdoor</span>
      </label>
      </div>

It seems this <div className="btn-group" data-toggle="buttons"> will affect the onClick event. Maybe some scripts are listening to this div. Thanks guys

Upvotes: 0

Views: 6565

Answers (5)

Srikanth V
Srikanth V

Reputation: 239

Works by adding onClick event to the label. This is an issue when we use data-toggle="buttons", so the onChange event doesn't fire.

constructor(props) {
   super(props);
   this.state = {
     seat_type: '',
    }
}

handleFormChange = (event) => {
  const val = event.currentTarget.querySelector("input").value;
  this.setState({ currValue: val });
}

render() {
  return (
    <div className="form-group">
      <label>Seat type : </label>
      <div className="btn-group" data-toggle="buttons">
        <label className="btn active" onclick={this.handleFormChange}>
          <input type="radio"
                 name="seat_type"
                 checked={this.state.seat_type === 'indoor'}
                 value="indoor"

          />
          <i className="fa fa-circle-o fa-2x" /><i className="fa fa-check-circle-o fa-2x" /><span> Indoor</span>
        </label>
        <label className="btn" onclick={this.handleFormChange}>
          <input type="radio"
                 name="seat_type"
                 checked={this.state.seat_type === 'outdoor'}
                 value="outdoor"

          /><i className="fa fa-circle-o fa-2x" /><i className="fa fa-check-circle-o fa-2x" /><span> Outdoor</span>
        </label>
      </div>
    </div>
  );
}

Upvotes: 1

dungnv
dungnv

Reputation: 19

Forget onChange, put onClick in Label tag and try:

 <div className="form-group">
        <label>Seat type : </label>
        <div className="btn-group" data-toggle="buttons">
            <label className="btn active" onclick={()=>this.handleFormChange('indoor')}>
                <input type="radio"
                       name="seat_type"
                       checked={this.state.seat_type==='indoor'}
                       onChange={ e => e => console.log('indoor'}
                       value={this.state.seat_type}

                       /><i
                className="fa fa-circle-o fa-2x"/><i
                className="fa fa-check-circle-o fa-2x"/><span> Indoor</span>
            </label>
            <label className="btn" onclick={()=>this.handleFormChange('outdoor')}>
                <input type="radio"
                       name="seat_type"
                       checked={this.state.seat_type==='outdoor'}
                       onChange={ e => console.log('outdoor')}
                       value={this.state.seat_type}

                /><i
                className="fa fa-circle-o fa-2x"/><i
                className="fa fa-check-circle-o fa-2x"/><span> Outdoor</span>
            </label>
        </div>
    </div>

Upvotes: 1

Youbent
Youbent

Reputation: 61

If you are using arrow function, me you don't have to bind the function to this

 onChange={ e => this.handleFormChange(e) }

Upvotes: 1

Vivek Doshi
Vivek Doshi

Reputation: 58543

That because Both radio button contains the same value

value={this.state.seat_type}

Please assign the different value for each radio input with same name.

Change your input radio as below

.....
<input type="radio"
    name="seat_type"
    checked={this.state.seat_type==='indoor'}
    onChange={ e => this.handleFormChange.bind(this)}
    value='indoor'
/>
.....
<input type="radio"
    name="seat_type"
    checked={this.state.seat_type==='outdoor'}
    onChange={ e => this.handleFormChange.bind(this)}
    value='outdoor'
/>
.....

Upvotes: 3

Giang Le
Giang Le

Reputation: 7044

Change checked={this.state.seat_type==='indoor'} to defaultChecked={this.state.seat_type==='indoor'} and checked={this.state.seat_type==='outdoor'} to defaultChecked={this.state.seat_type==='outdoor'}

Upvotes: 1

Related Questions