在 React 中将 onClick 处理程序作为道具传递

Question

我正在使用 CodePen 在 React 中创建一个计算器应用程序，但我无法将 onClick 处理程序传递给其中一个数字按钮。每次单击数字按钮时出现的错误是：

Uncaught TypeError: Cannot read properties of undefined (reading 'onClick')

将 onClick 处理程序作为道具从父组件传递到子组件的正确方法是什么？我正在尝试使用与official React tutorial 中使用的相同方法。这是我的代码：

function NumberButton(props){ // click handler is passed as prop from the Calculator
  return(
    <button className='square' onClick={() => this.props.onClick()}>
      {props.number}
    </button>
  );
}

function OperatorButton(props){
  return(
    <button className='square' onClick={() => this.props.onClick()}>
      {props.operation}
    </button>
  );
}

class Calculator extends React.Component{
  constructor(props){
    super(props);
    this.state={
      value_1:"",
      value_2:"",
      operation:null,
      display:null
    }
  }
  
  renderNumberButton(x){ //This function will render each number button using the number it gets passed as a prop
    return(
      <NumberButton 
        className='square'
        number={x} 
        onClick={() => this.numberClick(x)}
      /> 
    ); 
  }
  
  renderOperatorButton(y){ //function will render each operator function with the operator it gets passed as a prop
    return(
      <OperatorButton 
        operation={y} 
        onClick={() => this.operatorClick(y)}
      />
    );
  }
  
  numberClick(x){ 
    if (this.state.operation == null){ //if an operation hasn't been chosen, update value_1
      this.setState({
        value1:this.state.value_1.Concat(x),
        display: this.state.value_1
      })
    } else { //if an operation has been chosen, update value_2
      this.setState({ 
        value_2:this.state.value_2.Concat(x),
        display:this.state.value_2
      })
    }
  }
  
  operatorClick(y){
    this.setState({
      operation:y,
      display:this.state.value_2
    })
  }
  
  resetCalculator(){
    this.setState({
      value_1:null,
      operation:null,
      value_2:null
    })
  }
  
  
  
  render(){
    const array=[9, 8, 7, 6, 5, 4, 3, 2, 1];
    const numberButtons=array.map(x => this.renderNumberButton(x)) //renders the number buttons from this array instead of hard coding each one 
    
    return(
      <div>
        <div className='screen'>
          {this.state.display}
        </div>
        
        
        <div>
          {numberButtons.slice(0,3)}
        </div>

        <div>
          {numberButtons.slice(3,6)}
          <button
            className='square'
            onClick={() => this.resetCalculator}
          >
            clr
          </button>
        </div>

        <div>
          {numberButtons.slice(6, 10)}
          <button className='square'>
            =
          </button>
        </div>
        
        <div>
          {this.renderOperatorButton('+')}
          {this.renderOperatorButton('-')}
          {this.renderOperatorButton('x')}
          {this.renderOperatorButton('/')}
        </div>
      </div>
    );
  }
}

const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(<Calculator />)

Answer 1

请从NumberButton和OperatorButton中删除this。

onClick={() => props.conClick()}

NumberButton和OperatorButton是functional component，没有this。

你可以查看这个CodeSandbox