reactjs - 在这个 react 示例中,bind 做了什么?

标签 reactjs

以下代码中的this.tick.bind(this)语句中bind做了什么:

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}

代码取自React网站。

最佳答案

.bind() 将其用于创建的函数的 this 设置为传入的任何参数。Docs here .

在本例中,它将 tick() 函数的 this 设置为 render() 函数的上下文。

您会这样做,因为当函数用作 DOM 事件处理程序时,this 被设置为调度 DOM 事件的元素。您想要保证 this 是您所期望的,因为它在 tick()

中使用

关于reactjs - 在这个 react 示例中,bind 做了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32124213/

相关文章:

reactjs - react-native 中的 event.target.value

javascript - 语义 ui react 表 GridView float 卡问题

reactjs - 将2个功能合并为一个/共享使用状态

javascript - 将 css 内容属性的字体大小缩放到父级

javascript - React+gsap 使用随机动画元素组完成后无法工作?

javascript - 在 ReactJS 中尝试按 ID 设置元素样式时出现错误

javascript - 未捕获的范围错误 : `options.awareOfUnicodeTokens` must be set to `true` to use `YYYY` In date picker

javascript - D3 js - onClick of circle 我想在那个背景中添加区域

javascript - Jest 测试未通过 react-navigation 正常运行

reactjs - 抽屉导航器 : Change Background Color