调用多个函数 onclick 事件 Reactjs - react datepicker

Question

我需要在日历打开时使背景变灰 - 单击时，为此我正在尝试编写一个 js 函数并将它与实际的 onclick 处理程序一起调用 - 将它结合起来。但它不起作用，我无法控制 onclick 处理程序，因为我正在使用反应包？如何处理这种情况？请帮忙...

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.click 方法中调用 this.props.onClick。您还应该在构造函数方法中绑定 this.click 因为您正在使用 ES2015 class 语法来响应组件。

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;

调用多个函数 onclick 事件 Reactjs - react datepicker

Calling multiple functions onclick event Reactjs - react datepicker

onclick

datetimepicker

reactjs