将函数绑定到组件 React es6 的不同方法是啥 [重复]

Posted 2023-02-22

【中文标题】将函数绑定到组件 React es6 的不同方法是啥 [重复]

【英文标题】：what is a different approach to bind a function to a component React es6 [duplicate]将函数绑定到组件 React es6 的不同方法是什么 [重复]

【发布时间】：2017-09-09 06:31:24

【问题描述】：

我有一个像示例中一样的组件

class ItemBox extends Component 

  constructor(props)
    super(props);
    this.someFn = this.someFn.bind(this);
  

  someFn()
    console.log(this)
  

  render()
    return (
      <div onClick=this.someFn>bla<div/>
    )
  
;

我想问 - 是否有某种不同的解决方案将函数绑定到组件，除了我在构造函数中使用（从文档中阅读）。因为我可以有 100 个函数传递给子组件或在这个组件中使用等等。

【参考方案1】：

你可以这样做...

class ItemBox extends Component 

  someFn = ()=>
    console.log(this)
  
  constructor(props)
    super(props);
  

  render()
    return (
      <div onClick=this.someFn>bla<div/>
    )
  
;

【参考方案2】：

我通常这样做：

class SomeComponent extends Component 
    _handleClick = () => 
         console.log(this)
    
    render() 
        return (
            <div onClick=this._handleClick>bla</div>
        )