在閉包中調用類函數 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 箭頭函數執行相同的操作。

這樣您就可以避免在渲染標記中使用箭頭函數。