javascript - 在闭包内调用类函数 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 method .

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

class MyClass extends React.Component {

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

  render() {...}
}

React 需要纯函数。为了避免使用 lambda，例如:

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

通过 JavaScript Function 的 bind 方法将您的方法绑定(bind)到您的类，如下所示:

onChangeText={myMethodThatChangesState.bind(this)}

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

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