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

debugcn 发表于 Dev

Monkeyjs

压延机打开时，我需要将背景变灰-单击时，为此，我试图编写一个js函数并将其与实际的onclick处理程序一起调用-对其进行组合。但是它不起作用，因为我正在使用react包，所以我无法控制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;

基兰

您可以在this.click方法内调用this.props.onClick。您还应该在构造函数方法中绑定this.click，因为您正在使用ES2015类语法作为react组件。

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;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。