在闭包中调用类函数 React Native

Question

我是 React Native 的新手，在这里遇到了一个问题，我想在onChangeText函数中使用闭包而不是 lambda：

render() {
        return (
            <View style={{padding: 10}}>
                <TextInput style={{height: 40}} placeholder="Type here"
                           onChangeText = {function(t) {
                            this.setState({text: t});
                           }}
                          // onChangeText={(text) => this.setState({text: text})}
                />
                <Text style={{padding: 10, fontSize: 42}}>
                    {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
                </Text>
            </View>
        );
    }

问题出在闭包内部， this是闭包上下文，而不是类上下文，所以我不能在那里调用setState 。 在 Java 中，我只是简单地删除它，一切正常，但是我如何在 JS 中做到这一点？

Answer 1

您可以使用 JavaScript 的bind 方法。

假设您想要的函数已经是您类中的一个方法。 IE：

class MyClass extends React.Component {

  myMethodThatChangesState() {
    this.setState(...);
  }

  render() {...}
}

React 需要纯函数。 避免使用 lambda 表达式，例如：

onChangeText={() => this.setState(..)}

通过 JavaScript 函数的 bind 方法将您的方法绑定到您的类，如下所示：

onChangeText={myMethodThatChangesState.bind(this)}

使用Function.bind(this)返回一个以this作为最后一个参数的函数 - 所以this将是你的 React 类。 ES6 箭头函数执行相同的操作。

这样您就可以避免在渲染标记中使用箭头函数。