Question

我是React原生的新手，在这里遇到了问题，我想在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需要纯函数。为了避免使用lambdas，例如：

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

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

onChangeText={myMethodThatChangesState.bind(this)}

使用Function.bind(this)返回一个以this作为最后一个参数的函数 - 因此this将成为您的React类。 ES6箭头功能执行相同的操作。

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

在闭包React native中调用类函数

1 个答案: