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

Question

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

我的目标是将id保存到显示视图中，该视图显示单击的ListItemExample的详细视图。

export default class Example extends Component { 

    constructor() { 
    super(); 
    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 

    this.state = { 
     dataSource: ds, 
     isLoading: true 
    }; 
    } 

    componentDidMount() { 
    this.fetchData() 
    } 

    fetchData() { 

    Api.getPosts().then((resp) => { 
     console.log(resp); 
     this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(resp.posts), 
     isLoading: false 
     }) 
    }); 

    } 

    render() { 
    return (
     <View style={styles.container}> 

      <ListView 
       dataSource={this.state.dataSource} 
       renderRow={this.renderRow.bind(this)} 
       style={styles.postList} 
       /> 

     </View> 
    ); 
    } 

    renderRow(post) { 
    return (
     <PostListItem 
      id={post.id} 
      coverImage={post.cover_image} 
      title={post.title} 
      lockedStatus={post.status} 
      time={post.time} /> 
    ); 
    } 

} 



export default class ListItemExample extends Component { 

    constructor() { 
    super(); 
    } 

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


     </View> 
     </TouchableHighlight> 
    ); 
    } 

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

} 

Answer 1

你需要做的：onPress = {this.clicked.bind（这）}

Answer 2

从createClass反应ES6 classes的，我们需要处理的this正确的价值，我们的方法上移我们自己的，这里提到：http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes 更改您的代码有方法界在构造函数来校正使用this.clicked = this.clicked.bind(this)构造的这个值

的no autobinding是从反应器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

我使用FBSDK用时有相同的问题作出反应原住民。 @ 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()造成问题的召唤 “不确定是不是一个对象评估this.props.onLoginSuccess（）”。所以，当我在const infoRequest = new GraphRequest(...)改变了代码，包括.bind(this)：

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

它的工作。希望这可以帮助。

Answer 4

添加bind(this)到结合你的方法到电流分量，像

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

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

Answer 5

您可以使用箭头功能为您处理，并结合词汇范围自动的。 ...或者在调用时或在构造函数中传统的.bind（this）。但请注意，因为我认为一个答案使用这种方法：您必须更改您的babel设置，并确保您具有“可选”：[“es7.classProperties”]类中的箭头函数才能正常工作。