monkeyjs monkeyjs - 1 month ago 11
React JSX Question

Calling multiple functions onclick event Reactjs - react datepicker

I need to gray out the background when the calender opens up - on click, for that I am trying to write a js function and call it along with the actual onclick handler - combining it. But it does not work, I do not have control over the onclick handler as I am using react package? how to handle this case? please help...

class CustomDatePicker extends Component {

handleOpacity(){
// gray out the background page....
alert('test');
}

click(){
this.handleOpacity();
}


render () {
return (
<span>
<button className="custom-datepicker" onClick={this.props.onClick} >
{this.props.value}
</button>
</span>
)
}
}
CustomDatePicker.propTypes = {
onClick: React.PropTypes.func,
value: React.PropTypes.string
}

export default CustomDatePicker;

Answer

You can call this.props.onClick inside this.click method. You should also bind this.click in constructor method because you are using ES2015 class syntax for react components.

class CustomDatePicker extends Component {
  constructor() {
    this.click = this.click.bind(this)
  }

  handleOpacity(){
    // gray out the background page....
    alert('test');
  }

  click(){
    this.handleOpacity();
    this.props.onClick();
  }


  render () {
    return (
        <span>  
            <button className="custom-datepicker" onClick={this.click} >
             {this.props.value}
            </button>
        </span>
       )
    }
 }
CustomDatePicker.propTypes = {
  onClick: React.PropTypes.func,
  value: React.PropTypes.string
}

export default CustomDatePicker;