Aufruf mehrerer Funktionen onclick event Reactjs - react datepicker

Question

Ich muss den Hintergrund ausgrauen, wenn der Kalender öffnet - auf klicken, dafür versuche ich, eine js Funktion zu schreiben und es zusammen mit dem eigentlichen onclick Handler zu nennen - es zu kombinieren . Aber es funktioniert nicht, ich habe keine Kontrolle über den onclick-Handler, da ich react-Paket verwende? Wie geht man mit diesem Fall um? bitte helfen Sie ...

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 1

Sie können this.props.onClick innerhalb this.click-Methode aufrufen. Sie sollten auch this.click in der Konstruktormethode binden, da Sie die ES2015-Klassensyntax für react-Komponenten verwenden.

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;