Question

在我的React应用程序中，我有一些函数，我希望能够访问几个类似的组件...但是，我想将this绑定到共享函数，以便它们可以执行更新组件状态等操作...但是，似乎导入函数然后尝试以“典型”React方式绑定this不起作用。

以下是我想要完成的内容的说明 - 在这种情况下，单击呈现的按钮将从导入的共享函数文件中调用该函数并更新组件状态：

//shared_functions.js
const sharedFunctions = {
    testFunction = () => {
        this.setState({functionWasRun: true})
    }
}


//MyComponent.jsx
import React, { Component } from 'react';
import sharedFunctions from '../static/scripts/shared_functions.js';
let { testFunction } = sharedFunctions;

class MyComponent extends Component {
    constructor(props){
        super(props);
        this.testFunction = this.testFunction.bind(this)
        this.state = {
            functionWasRun: false
        }
    }

    render(){
        return(
            <div>
                <button onClick={this.testFunction}>Click</button>
            </div>
        )
    }
}

尝试按原样运行此代码将返回如下错误：

Uncaught (in promise) TypeError: Cannot read property 'bind' of undefined

我得到了所有这些...但我想知道的是：是否可以将this绑定到导入功能？

我开始在我的应用程序中弹出很多看似相似的功能，我希望通过将它们抽象为共享脚本来简化操作，但我不确定如何实现典型的{{ 1}}绑定，以实现状态设置。

Answer 1

以下行不是尝试绑定导入的testFunction，而是绑定testFunction的方法<MyComponent>

要绑定导入的函数，请直接参考，如下所示：

this.testFunction = testFunction.bind(this);
// Notice how:      ^--- there is no longer a this here

注意：您的示例尝试在箭头功能上使用绑定 您无法将新上下文绑定到箭头功能。

箭头函数的this上下文将始终设置为该位置   它是如何定义的。

你可以通过声明来解决这个问题   testFunction使用常规函数声明：
const sharedFunctions = {
    function testFunction(){
        this.setState({functionWasRun: true})
    }
}

Answer 2

我以以下方式使用它：

在构造函数中：

this.handleChange = handleChange.bind(this);

在导入的文件中（请注意，没有箭头）：

export const handleChange = function handleChange(event) 
{
  const { name, value } = event.target;
  this.setState({
    [name]: object
  });
};

Answer 3

import ToastTimeout from 'toastTimout'
ToastTimeout.bind(this)('message to popup')

我能够在一个简单的服务中使用setTimeout函数获取此上下文，该函数更改了this上下文中的变量

对不起sudo代码

React - 将`this`绑定到导入的函数

3 个答案: