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

Answer 1

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

 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 2

在init_keypad函数中， atthis.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();

          });

     ...

您的代码的工作示例在这里