arnthor3 / react-bootstrap-toggle

Bootstrap-toggle without the JQuery dependencies
Other
54 stars 16 forks source link

onClick callback #19

Closed mstruensee closed 6 years ago

mstruensee commented 6 years ago

Can the onClick callback pass back more than just the new value? Like the event, id, data value?

The reason for this would be code reusability ... can reuse the same toggle method to set the state for multiple Toggle's on the same component.

My current example works for all my onChange's except Toggle's 'onClick' onChange = (event) => { this.setState({ [event.target.attributes["data-config-key"].value]: event.target.value }) }

Event would be best in my opinion because the user can get whatever information they want from the dom if they need it.

Thanks, Matthew Struensee

mstruensee commented 6 years ago

as a workaround I did this: onClick={ (value) => this.toggle(key, value)

toggle = (key, value) => { this.setState({ [key]: value }) }

arnthor3 commented 6 years ago

I like the idea. Care to help on this and do a pr?

arnthor3 commented 6 years ago

I hit a small problem, the event originated from the child span that is clicked, so I had to do this with a bit of a twist.

So what do you think about this?

  onClick(evt) {
    if (this.props.disabled) return;
    if (typeof this.props.onClick === 'function') {
      this.props.onClick(!this.props.active, this.parent, evt);
    }
  }

you can still access the state the same way you did, the second parameter is the parent element and the third is the event - albeit a totally useless event in my opinion..

arnthor3 commented 6 years ago

I hope this is enough feel free to reopen it if there is anything more.