调用多个函数onclick事件Reactjs - react日期picker

Question

我需要灰色背景时，日历打开-点击，为此，我试图写一个js函数，并调用它与实际的onclick处理程序-结合它。但它不起作用，我没有控制onclick处理程序，因为我使用react包?如何处理这种情况?请帮助…

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

你可以在this里面调用this.props. onclick。点击的方法。你也应该绑定这个。

请点击构造函数方法，因为react组件使用的是ES2015类语法。

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;