monkeyjs monkeyjs - 10 months ago 70
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 Source

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;