Question

我有一个函数handleInputChange，我想编写一次（DRY原理），但是将其应用于我的许多React类。但是，在构造函数中绑定到this无效。

handleInputChange = (key, value) => {this.setState(key: value)}

class Login extends Component {
        constructor(props) {
            super(props);
            this.state = {
                loginBox: {
                    username: "",
                    password: ""}
            }


      this.handleInputChange = handleInputChange.bind(this) // DOESN't WORK
}}

为什么上述方法无效？我得到的错误是：

Uncaught TypeError: Cannot read property 'setState' of undefined

我目前正在使用此函数包装方法，但我希望直接绑定该函数。

handleInputChange = (_this) => () => (key, value) => {_this.setState(key: value)}
class Login extends Component {
    ...
    this.handleInputChange = (key, value) => handleInputChange(this)(key, value)

Answer 1

您无法在箭头功能中绑定this。 this属于父级作用域。

您可以使其成为非箭头功能：

function handleInputChange(key, value) { this.setState(key: value) }

但是我建议将其作为类的方法。定义引用this的函数非常棘手，因为您不知道this在执行时将是什么，因此一眼就很难读取该函数。

Answer 2

箭头函数没有自己的this，如果您使用call([this obj], args)，apply([this obj], args)，则任何“ this”参数都将被忽略。我猜这同样适用于bind(obj)，它不会将此绑定到您提供的对象，因为它没有自己的对象。

箭头功能内的

this由this在定义箭头功能的词汇范围内确定。如果您在全局范围内定义handleInputChange，则this内部是全局对象（在浏览器中是窗口），这就是您收到错误的原因。

如果您想使用bind，则可以这样定义函数

function handleInputChange(key, value) { this.setState(key: value) }

调用bind时，this将被设置为您在bind中提供的对象。

Answer 3

由于您是在类中调用此函数，因此最好将其定义为类中的方法，而不是在外部进行定义，这样this的问题就更少了。

在类内部使其非常简单：

constructor(props) {
this.handleInputChange = this.handleInputChange.bind(this)
}

handleInputChange() {
   //Code
}

或者，如果您想避免使用麻烦的bind方法，可以对该方法使用箭头功能：

handleInputChange = () => {
  console.log('This is: ', this);
}
...

render() {
  return(
    <button onClick={this.handleInputChange}>Click</button>
   );
}

引用react handling events

如何将函数的“ this”绑定到类（React Component）

3 个答案: