函数 ReactJS 中未定义的处理程序

Question

我正在尝试更新父组件的状态。我在父级中实现了一个处理程序，并使用道具将其发送给子级。

 constructor(props) {
    super(props);

    this.handleState = this.handleState.bind(this)

    this.state = {
      current_state: "keypad",
      current_video: video1
    };
  }

  handleState() {
    this.setState({
      current_state: "video"
    })
  }

 render(){
        return (
          <div className="contentArea">
            <Keypad handler = {this.handleState}/>
          </div>
        );
}

现在我使用 div 和 onclick 事件对此进行了测试，它使用此 onclick 工作。现在我想在一些现有的代码中实现这一点，但这不起作用。它给了我处理程序未定义的错误。我一直在阅读很多关于类似问题的答案，但我不知道为什么这不起作用。

    export default class Keypad extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      correct_code: 1234,
    };
  }

  init_keypad(code){
    window.tries = 0;
    $(".key").click(function(){
        var n = $(this).html();
        $('.screen').append( n );
        window.tries++;
      // if 4 digits are entered check if its correct
      if (window.tries >= 4){
        var w = $('.screen').html();
        if (w == code){
          $('.success').show().delay(5000).queue(function(n) {
            $('.success').hide(); n();
          });
          this.props.handler(); //here it breaks
        }
        else{
          $('.error').show().delay(1000).queue(function(n) {
            $('.error').hide(); n();
          });
        }
        $('.screen').html('');
        window.tries = 0;
      }
    });
  }

  componentDidMount(){
    this.init_keypad(this.state.correct_code);
  }


  render() {
    return(
    <div class="keypad_wrapper">
        <div class="screen"></div>
        <div class="error notification">ERROR</div>
        <div class="success notification">SUCCESS</div>

        <div class="key">1</div>
        <div class="key">2</div>
        <div class="key">3</div>
        <div class="key">4</div>
        <div class="key">5</div>
        <div class="key">6</div>
        <div class="key">7</div>
        <div class="key">8</div>
        <div class="key">9</div>
        <div class="key last">0</div>
      <div>{this.state.state}</div>
    </div>
  );
  }
}

Answer 1

您忘记在Keypad 组件中添加this.init_keypad = this.init_keypad.bind(this)，需要将.click 回调绑定到组件本身或通过变量引用组件：

 export default class Keypad extends React.Component {
  constructor(props) {
    super(props);
    this.init_keypad = this.init_keypad.bind(this); // <---- bind it
    this.state = {
      correct_code: 1234,
    };
  }

  init_keypad(code){
    window.tries = 0;
   const self = this; /// <---- store a pointer to the component
    $(".key").click(function(){
        var n = $(this).html();
        $('.screen').append( n );
        window.tries++;
      // if 4 digits are entered check if its correct
      if (window.tries >= 4){
        var w = $('.screen').html();
        if (w == code){
          $('.success').show().delay(5000).queue(function(n) {
            $('.success').hide(); n();
          });
          self.props.handler(); // <----- use the pointer not `this`
        }
        else{
          $('.error').show().delay(1000).queue(function(n) {
            $('.error').hide(); n();
          });
        }
        $('.screen').html('');
        window.tries = 0;
      }
    });
  }

  componentDidMount(){
    this.init_keypad(this.state.correct_code);
  }


  render() {
    return(
    <div class="keypad_wrapper">
        <div class="screen"></div>
        <div class="error notification">ERROR</div>
        <div class="success notification">SUCCESS</div>

        <div class="key">1</div>
        <div class="key">2</div>
        <div class="key">3</div>
        <div class="key">4</div>
        <div class="key">5</div>
        <div class="key">6</div>
        <div class="key">7</div>
        <div class="key">8</div>
        <div class="key">9</div>
        <div class="key last">0</div>
      <div>{this.state.state}</div>
    </div>
  );
  }
}

Answer 2

在init_keypad 函数中，this.props.handler() 处，this 指向window 对象。

要解决您的问题，只需将 handler 作为参数传递给 init_keypad 函数即可。

像这样。

...
componentDidMount() {
    this.init_keypad(this.state.correct_code, this.props.handler);
  }
...

init_keypad(code, handler){
    window.tries = 0;
    $(".key").click(function(){
        var n = $(this).html();
        $('.screen').append( n );
        window.tries++;
      // if 4 digits are entered check if its correct
      if (window.tries >= 4){
        var w = $('.screen').html();
        if (w == code){
          $('.success').show().delay(5000).queue(function(n) {
            $('.success').hide(); n();
          });
          handler(); //here it works!
        }
        else{
          $('.error').show().delay(1000).queue(function(n) {
            $('.error').hide(); n();
          });
     ...

code is here 的工作样本