Question

在主要组件的渲染方法中，我有这一行，

        <BettingChips onClick={(betAmount) => this.handleClick(betAmount)} />

这与此功能相对应，

handleClick(betAmount){
    alert(betAmount);
}

但是在子组件下，我似乎无法将参数传递给handleClick函数，

class BettingChips extends Component{

    render(){ 

        return(
     <div> 
        <button onClick={this.props.onClick} value={1} >1</button>
         // ... etc   
     </div>
) 
};

我可以写这个.props.onClick ...但我不能写这个.props.onClick（1）以便它将整数值1传递给父组件。我该如何解决这个问题？感谢。

Answer 1

尝试在不使用props内的箭头函数定义的情况下执行此操作（对于子组件性能不好，因为它始终是新的函数引用more info here）

父类在将onClick传递给BettingChips时不需要定义箭头函数，我们可以在类级别执行此操作，使用箭头函数来词法绑定this ...

class SomeParentComponent extends Component {

  handleClick = (betAmount) => {
    alert(betAmount)
  }

  render() {
    return <BettingChips onClick={this.handleClick} />
  }

}

在BettingChips使用事件从事件的目标（已点击的按钮）中提取value，因此您不需要使用箭头功能并将金额作为参数< / p>

class BettingChips extends Component {

  onClick = (e) => {
    this.props.onClick(e.target.value)
  }

  render() { 
   return(
     <div> 
       <button onClick={this.onClick} value={1}>1</button>
       // ... etc   
     </div>
    ) 
  }

}

Answer 2

这很简单。只需改变

<button onClick={this.props.onClick} value={1} >1</button>

到

<button onClick={() => this.props.onClick(1)} value={1} >1</button>

干杯！

Answer 3

这一定对您有用：

class BettingChips extends Component{

render(){ 
 return(
   <div> 
      <button onClick={() => this.props.onClick(1)} value={1} >1</button>
      // ... etc   
   </div>
  ) 
};

Answer 4

一种方法是在子组件中创建一个新函数，然后从props调用父函数。如果在单击按钮时需要执行更复杂的逻辑，这将非常有用。这是一个代码示例：

class BettingChips extends Component{
    constructor(props) {
        super(props);
        this.onClick = this.onClick.bind(this);
    }
    onClick() {
        // do something else or prepare parameters for parent's `onClick`
        this.props.onClick(1);
    }
    render(){ 
        return(
             <div> 
                 <button onClick={this.onClick} value={1}>1</button>   
             </div>
         );
};

在React中，如何将参数传递给父组件的handleClick函数？

4 个答案: