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

Answer 1

我试图更新父组件的状态。我在父级中实现了一个处理程序，并使用道具将其发送给子级。&nbsp;constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.handleState = this.handleState.bind(this)&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; current_state: "keypad",&nbsp; &nbsp; &nbsp; current_video: video1&nbsp; &nbsp; };&nbsp; }&nbsp; handleState() {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; current_state: "video"&nbsp; &nbsp; })&nbsp; }&nbsp;render(){&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="contentArea">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Keypad handler = {this.handleState}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; );}现在我使用 div 和 onclick 事件对此进行了测试，它使用这个 onclick 工作。现在我想在一些现有的代码中实现这一点，但这不起作用。它给了我处理程序未定义的错误。我一直在阅读很多关于类似问题的答案，但我不知道为什么这不起作用。&nbsp; &nbsp; export default class Keypad extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; correct_code: 1234,&nbsp; &nbsp; };&nbsp; }&nbsp; init_keypad(code){&nbsp; &nbsp; window.tries = 0;&nbsp; &nbsp; $(".key").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; var n = $(this).html();&nbsp; &nbsp; &nbsp; &nbsp; $('.screen').append( n );&nbsp; &nbsp; &nbsp; &nbsp; window.tries++;&nbsp; &nbsp; &nbsp; // if 4 digits are entered check if its correct&nbsp; &nbsp; &nbsp; if (window.tries >= 4){&nbsp; &nbsp; &nbsp; &nbsp; var w = $('.screen').html();&nbsp; &nbsp; &nbsp; &nbsp; if (w == code){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.success').show().delay(5000).queue(function(n) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.success').hide(); n();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.props.handler(); //here it breaks&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.error').show().delay(1000).queue(function(n) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.error').hide(); n();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $('.screen').html('');&nbsp; &nbsp; &nbsp; &nbsp; window.tries = 0;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; }&nbsp; componentDidMount(){&nbsp; &nbsp; this.init_keypad(this.state.correct_code);&nbsp; }&nbsp; render() {&nbsp; &nbsp; return(&nbsp; &nbsp; <div class="keypad_wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <div class="screen"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="error notification">ERROR</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="success notification">SUCCESS</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="key">1</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="key">2</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="key">3</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="key">4</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="key">5</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="key">6</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="key">7</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="key">8</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="key">9</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="key last">0</div>&nbsp; &nbsp; &nbsp; <div>{this.state.state}</div>&nbsp; &nbsp; </div>&nbsp; );&nbsp; }}

Answer 2

在init_keypad函数中， atthis.props.handler()指向this对象window。要解决您的问题，只需将handler作为参数传递给init_keypad函数。像这样。...componentDidMount() {&nbsp; &nbsp; this.init_keypad(this.state.correct_code, this.props.handler);&nbsp; }...init_keypad(code, handler){&nbsp; &nbsp; window.tries = 0;&nbsp; &nbsp; $(".key").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; var n = $(this).html();&nbsp; &nbsp; &nbsp; &nbsp; $('.screen').append( n );&nbsp; &nbsp; &nbsp; &nbsp; window.tries++;&nbsp; &nbsp; &nbsp; // if 4 digits are entered check if its correct&nbsp; &nbsp; &nbsp; if (window.tries >= 4){&nbsp; &nbsp; &nbsp; &nbsp; var w = $('.screen').html();&nbsp; &nbsp; &nbsp; &nbsp; if (w == code){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.success').show().delay(5000).queue(function(n) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.success').hide(); n();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handler(); //here it works!&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.error').show().delay(1000).queue(function(n) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.error').hide(); n();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;...您的代码的工作示例在这里