javascript - 为什么 React 回调绑定(bind)到 null 有效?

标签 javascript reactjs

<分区>

可以在下面的链接中找到一个可用的 WebpackBin,

https://www.webpackbin.com/bins/-Kibrw5tNNrsQpENUv_M

我有两个组件。父组件通过 prop 将函数传递给子组件,子组件的事件处理程序通过 func.bind(null, num) 调用传入的函数以提供额外的预设参数。

为什么 dummyFunc.bind(null, 666) 有效,不应该 bind 使新创建的函数 this context 变为 null ?因此,每个 this.setState 都应该变成未定义的。


父组件代码,

import React from 'react'
import Component from './Component'

export default class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      foo: 2
    }

    this.foo = this.foo.bind(this)
  }

  foo(newValue) {
    this.setState({
      foo: newValue + this.state.foo
    })
    console.log(this.state.foo)
  }

  render() {
    return (
      <div>
        <h1>App</h1>
        <Component dummyFunc={this.foo} />
      </div>
    )
  }
}

子组件代码,

import React from 'react'

const Component = ({dummyFunc}) => {
  return (
    <div>
      <button onClick={dummyFunc.bind(null, 666)}>BUTTON</button>
    </div>
  )
}

export default Component

最佳答案

Why alert.bind(null, 666) works, should not bind make the newly created function this context become null?

它只会更改您绑定(bind)到的函数的上下文:alert(并且仅适用于新创建的绑定(bind)函数)。所以在 alert 函数内部,上下文会被改变,这几乎没问题 - 因为在内部 alert 不会使用默认上下文,但这不受限制。

该代码的目的是部分应用 alert 函数的参数 - 这是一个数字 666

从这个 Angular 来看,使用匿名函数在语义上更正确:

<button onClick={() => alert(666)}>BUTTON</button>

在你的垃圾桶里你:

this.foo = this.foo.bind(this)

所以你已经明确地绑定(bind)了一个上下文。在你这样做之后,所有其他 .bind() 都不会再改变上下文(这是按照标准)。

关于javascript - 为什么 React 回调绑定(bind)到 null 有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43623731/

相关文章:

reactjs - 你如何在 Next.js 中管理组件状态

javascript - ReactJs - 语法错误 : embedded: Unterminated JSX contents

javascript - Axios 请求在生产构建中返回 HTML 而不是 JSON。 ( react 、Node.js、Heroku)

c# - dropdownlist onchange 事件未触发

javascript - 某些文件获取 "TypeError: Cannot convert a Symbol value to a string"

javascript - 访问作为对象的 reducer 有效负载的元素

javascript - 如何计算 Angular 或javascript中分组数组的长度?

reactjs - 在 React 组件中更改 borderColor

javascript - 如何根据 ajax 错误响应禁用元素

javascript - 如何将对象从 React 文件导入到普通的 javascript 文件