Question

我正在尝试访问SQL方法中的this.props，但它们未定义。如何通过ListItemExample类中的方法访问clicked()？

我的目标是将this.props维护到显示视图中，该视图显示单击的ListItemExample的详细信息视图。

id

Answer 1

您需要onPress={this.clicked.bind(this)}

Answer 2

随着React从createClass转移到ES6 classes，我们需要自己处理this到我们方法的正确值，如下所述：http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes 更改代码，使构造函数中的this.clicked = this.clicked.bind(this)在构造函数中将方法限制为正确的值

no autobinding是React家伙为ES6课程刻意迈出的一步。 React.createClass提供了自动绑定到正确的上下文。有关详细信息，请访问：https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

因此，基于此，您还可以将clicked方法更改为：

export default class ListItemExample extends Component {

 constructor(props) {
   super(props);
 }

 render() {
   return (
    <TouchableHighlight onPress={this.clicked} >
      <View style={styles.postItem}>


      </View>
    </TouchableHighlight>
  );
 }

 clicked = () => {
   console.log("clicked props");
   console.log(this.props);
   Actions.openPost();
 }

}

Answer 3

添加bind(this)将您的方法绑定到当前组件，例如

yourMethod(){
    console.log(this.props)
}    

<SomeComponent onClick={this.yourMethod.bind(this)} />

Answer 4

您可以为处理程序使用箭头函数，并自动绑定到词法范围。 ...或者在调用时或构造函数中查看传统的.bind（this）。但是请注意，我认为一个答案使用这种方法：你必须改变你的babel设置，并确保你有“可选”：[“es7.classProperties”]，让类中的箭头函数正常工作。

Answer 5

将FBSDK与React Native一起使用时，我遇到了同样的问题。 @fandro回答几乎解释了很多。

我有这个：

render() {
        const infoRequest = new GraphRequest(
            '/me',
            null,
            this.responseInfoCallback,
        );

        return (
            <View>
                <LoginButton
                    readPermissions={["email"]}
                    onLoginFinished={
                        (error, result) => {
                            if (error) {
                                console.log("Login failed with error: " + result.error);
                            } else if (result.isCancelled) {
                                console.log("Login was cancelled");
                            } else {
                                new GraphRequestManager().addRequest(infoRequest).start(1000);
                                console.log("Login was successful with permissions: " + result.grantedPermissions)
                            }
                        }
                    }
                    onLogoutFinished={() => alert("User logged out")}/>
            </View>
        );
    }

responseInfoCallback(error, result) {
        if (error) {
            alert('Error fetching data: ' + error.toString());
        } else {
            alert('Success fetching data: ' + result.toString());
            this.props.onLoginSuccess();
        }
    }

调用this.props.onLoginSuccess()导致问题＆＃34; undefined不是评估this.props.onLoginSuccess（）＆＃34;的对象。因此，当我更改const infoRequest = new GraphRequest(...)中的代码以包含.bind(this)时：

const infoRequest = new GraphRequest(
        '/me',
        null,
        this.responseInfoCallback.bind(this),
    );

有效。希望这会有所帮助。

Answer 6

然后您试图进入另一个视图，则必须在导入的组件的onPress中使用它来发送对象导航

示例

在视图中实现组件

<CardComponent title="bla bla" navigation={this.props.navigation} />

组件模板

`<View>
       <Button  title={this.props.title} onPress={()=> 
       this.props.navigation.navigate("anotherAwesomeView")}/>
</View>`

此问题是因为您要实现的组件未在stackNavigation上定义，因此，methot导航对您不可用，并且通过参数传递此对象导航器，您将可以访问它

React Native无法在render（）方法之外访问this.props

6 个答案: