Question

可以在下面的链接找到工作的WebpackBin，

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

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

为什么dummyFunc.bind(null, 666)有效，bind不应该使新创建的函数this上下文成为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

Answer 1

为什么alert.bind（null，666）有效，不应该绑定使新创建的函数这个上下文变为null？

它只会更改您要绑定的函数的上下文：alert（并且仅适用于新创建的绑定函数）。因此，在alert函数内部将更改上下文，这几乎没有问题 - 因为内部alert不会使用默认上下文，但这不受约束。

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

从这个角度来看，使用匿名函数在语义上更正确：

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

在你的垃圾箱里：

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

所以你明确地绑定了一个上下文。执行此操作后，其他.bind()不再更改上下文（按照标准）。

为什么React回调绑定到null有效？

1 个答案: