在闭包中调用类函数 React Native

Question

I'm new to React native, and got a problem here, I want to use closure instead of lambda at onChangeText function:

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>
        );
    }

The problem is inside the closure, this is the closure context, not the class context, so I can't call setState there. In Java, I just simply remove this and everything OK, but how can I do this in JS?

Answer 1

You can use JavaScript's bind method .

Assuming your desired function is already a method on your class. ie:

class MyClass extends React.Component {

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

  render() {...}
}

React requires pure functions. To avoid using lambdas such as:

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

Bind your method to your class through JavaScript Function's bind method, like so:

onChangeText={myMethodThatChangesState.bind(this)}

Using Function.bind(this) returns a function with the this as the last argument - so the this will be your React class. ES6 arrow functions perform the same action.

This way you can avoid using arrow functions in your render markup.