尝试将值传递给处理程序但收到未定义

Question

我正在尝试使用处理程序将子组件中的值传递给父组件（从PressButton类到App类），但是当我传递值时，它在处理程序中作为未定义接收。该值从按钮One传递，并在handleUpdate处理程序中接收。那么我该如何解决这个问题呢？

这是我的代码：

import React from 'react';

export default class App extends React.Component {
  constructor(props){
   super(props);
   this.handleUpdate = this.handleUpdate.bind(this);
   this.state={

     score: 0,
     prevNum: 0,
     currNum: 0
   };
  }
 handleUpdate = (val)=>e=>{
  //alert('asigh');

   val = parseInt(val,10);
   alert(val);
  // console.log('val'+val);
 var curScore = parseInt(this.state.score,10);
  //console.log('curScore'+curScore);
  var curVal = parseInt(this.state.prevNum,10);
  if(val===curVal)
  {
   curScore++;
  }

   this.setState(()=>{
     return {
        score: curScore,
        prevNum: val,
        currNum: val
     };
   });
 }
  render()
  {
    return(
      <div>

        <PressButtons currNum={this.state.currNum} prevNum={this.state.prevNum} prevScore={this.state.score} handleUpdate={this.handleUpdate()}/>
        <Header score={this.state.score} currNum={this.state.currNum}/>
      </div>
    );
  }
}
  class Header extends React.Component {
    render(){
    //  console.log('curnum in headert is '+this.props.currNum);
      return(
        <div>
        <h1>Current Number:{this.props.currNum}</h1>
        <h1>Current score: {this.props.score}</h1>
        </div>
      );
    }
  }


  class PressButtons extends React.Component {
    constructor(props) {
      super(props);
      this.clickOne = this.clickOne.bind(this);
      this.clickTwo = this.clickTwo.bind(this);
      this.clickThree = this.clickThree.bind(this);
      this.clickFour = this.clickFour.bind(this);
      this.clickFive = this.clickFive.bind(this);
      this.clickSix = this.clickSix.bind(this);
      this.clickSeven = this.clickSeven.bind(this);
      this.clickEight = this.clickEight.bind(this);
      this.clickNine = this.clickNine.bind(this);
    }
    clickOne(e){
         e.preventDefault();
         this.props.handleUpdate(1);
    }
    clickTwo(e){
         e.preventDefault();
         this.props.handleUpdate(2);
    }
    clickThree(e){
         e.preventDefault();
         this.props.handleUpdate(3);
    }
    clickFour(e){
         e.preventDefault();
         this.props.handleUpdate(4);
    }
    clickFive(e){
         e.preventDefault();
         this.props.handleUpdate(5);
    }
    clickSix(e){
         e.preventDefault();
         this.props.handleUpdate(6);
    }
    clickSeven(e){
         e.preventDefault();
         this.props.handleUpdate(7);
    }
    clickEight(e){
         e.preventDefault();
         this.props.handleUpdate(8);
    }
    clickNine(e){
         e.preventDefault();
         this.props.handleUpdate(9);
    }
    render(){
      return(
        <div>
          <table>
            <tr>
              <td><button onClick={(e)=>this.props.handleUpdate(1)}>One</button></td>
              <td><button onClick={this.clickTwo}>Two</button></td>
              <td><button onClick={this.clickThree}>Three</button></td>
            </tr>
            <tr>
              <td><button onClick={this.clickFour}>Four</button></td>
              <td><button onClick={this.clickFive}>Five</button></td>
              <td><button onClick={this.clickSix}>Six</button></td>
            </tr>
            <tr>
              <td><button onClick={this.clickSeven}>Seven</button></td>
              <td><button onClick={this.clickEight}>Eight</button></td>
              <td><button onClick={this.clickNine}>Nine</button></td>
            </tr>
          </table>
        </div>
      );
    }
  }

Answer 1

1将它作为道具

传递时，不应该调用函数

将它作为道具传递给子组件时，不应该调用函数。所以你的代码：

<PressButtons
    currNum={this.state.currNum}
    prevNum={this.state.prevNum}
    prevScore={this.state.score}
    handleUpdate={this.handleUpdate()}
/>

应该是

<PressButtons
    currNum={this.state.currNum}
    prevNum={this.state.prevNum}
    prevScore={this.state.score}
    handleUpdate={this.handleUpdate} // <--- change here
/>

还有你的功能：

handleUpdate = (val)=>e=>{
    // your code
}

应该是：

handleUpdate = (val)=>{
    // your code
}

2如果您不想更改功能或代码

如果您不想更改自己的功能或代码，那么您将获得e代替val

的价值

所以，你的功能应该如下：

handleUpdate = (val)=>e=>{
    console.log(e); // <--- you will get your value here
    // your code
}