React如何绑定一个函数到一个组件实例？-白红宇

有以下几种方式可以确保函数可以访问组件属性，比如像this.props和this.state，取决于使用的语法和构建步骤。

在构造函数中绑定（ES2015）

class Foo extends Component {  constructor(props) {    super(props);    this.handleClick = this.handleClick.bind(this);  }  handleClick() {    console.log('Click happened');  }  render() {    return ;  }}复制代码

类属性（第三阶段提案）

class Foo extends Component {  // Note: this syntax is experimental and not standardized yet.  handleClick = () => {    console.log('Click happened');  }  render() {    return ;  }}复制代码

在Render中的绑定

class Foo extends Component {  handleClick() {    console.log('Click happened');  }  render() {    return ;  }}复制代码

注意：在render方法中使用Function.prototype.bind会在每次组件渲染时创建一个新的函数，可能会影响性能。

在Render中的箭头函数

class Foo extends Component {  handleClick() {    console.log('Click happened');  }  render() {    return ;  }}复制代码

注意：在render方法中使用箭头函数也会在每次组件渲染时创建一个新的函数，可能会影响性能。

如何传递参数给事件处理器或回调？

可以使用箭头函数包裹事件处理器，并传递参数：

以上代码和调用.bind是等价的：

复制代码

通过data-属性传递参数

const A = 65 // ASCII character codeclass Alphabet extends React.Component {  constructor(props) {    super(props);    this.handleClick = this.handleClick.bind(this);    this.state = {      justClicked: null,      letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i))    };  }  handleClick(e) {    this.setState({      justClicked: e.target.dataset.letter    });  }  render() {    return (      
    
             Just clicked: {this.state.justClicked}        
     
                {this.state.letters.map(letter =>            
                    {letter}            
          )}        
     
      
    
    )  }}复制代码