javascript - React Native中的 'this'关键字指的是 'this'的曾孙

Question

好吧，我意识到这段代码很臭，但请耐心等待一下。

我正在玩the code here我有一个奇怪的情况关于 this关键词。

在下面的代码片段中，我想要按 TopBar 中的按钮触发goose index.ios.js中的方法，确实如此。然而，里面goose this指曾孙:

子= ComponentOne

孙子 = VoterScreen

曾孙 = TopBar

显然，这是由于我传递 props 的方式造成的一直到TopBar我确信这不是“React Native 方式”，但有人可以告诉我吗:

1 - 如何修改下面的代码并引用this正确(根据我的阅读，这将使 render 由于状态更改而再次被调用，从而无需调用forceUpdate())。

或者:

2 - 如何让曾孙调用goose哪里this是this我期望通过编辑 callbacks 的方式正在工作。

index.ios.js 的代码:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View
} from 'react-native';
import VoterScreen from './components/voter-screen.js'

export default class StyleAB extends Component {
  constructor(props)
{
  super(props);
  this.state =
  {
    componentSelected: 'One',
  }
}

changeComponent = (component) =>{
  this.setState({componentSelected: component});
}

goose(){
  console.log('State before: ' + JSON.stringify(this.state));
  this.state = { componentSelected: 'Two', }
  console.log('State after: ' + JSON.stringify(this.state));
  this.forceUpdate();
}

renderComponent(component) {
      if(component == 'One') {
      return <ComponentOne changeComponent={this.changeComponent} goose={this.goose} />
    } else if(component == 'Two') {
      return <ComponentTwo changeComponent={this.changeComponent} />
    } else if(component == 'Three') {
      return <ComponentThree changeComponent={this.changeComponent} />
    }
}

render() {
  console.log('Render is called');
  return (
    <View style={styles.container}>
      {this.renderComponent(this.state.componentSelected)}
    </View>
  );
}
}

class ComponentOne extends Component {
  render() {
return (
  <VoterScreen sendData={this.props.goose}/>
)
  }
}

class ComponentTwo extends Component {
render() {
return (
  <UploadScreen/>
)
  }
}

class ComponentThree extends Component {
render() {
return (
  <ResultsScreen/>
)
  }
}

const styles = StyleSheet.create({
  container: {
flex: 1,
  }
});

AppRegistry.registerComponent('StyleAB', () => StyleAB);

voter-screen.js 的代码:

import React, { Component } from 'react';
import { View } from 'react-native';
import { Button } from 'react-native-elements';
import TopBar from './top-bar.js'

class VoterScreen extends Component {
  render() {
console.log('Render is called in VoterScreen');
let topIsA = true;
  return (
    <View style={{flex: 1}}>
      <TopBar parentToggle={this.props.sendData}/>
    </View>
  );
  }

}

export default VoterScreen

top-bar.js 的代码:

import React, { Component } from 'react'
import { View } from 'react-native';
import { Button } from 'react-native-elements';

class TopBar extends Component {

  render() {
console.log('Render is called in TopBar');
return (
  <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'black'}}>
    <Button
    raised
    containerViewStyle={{backgroundColor: 'black'}}
    icon={{name: 'camera', type: 'font-awesome', size: 20, style: {marginRight: 0, textAlign: 'center'}}}
    buttonStyle={{backgroundColor: '#cd00cd', borderRadius: 10, width: 50, height: 50}}
    onPress={this.props.parentToggle.bind(this)}
    />
  </View>
)
 }

}

export default TopBar

编辑:答案是做三件事:

1 - 在 index.ios.js :

更改:

return <ComponentOne changeComponent={this.changeComponent} goose={this.goose} />

致:

return <ComponentOne changeComponent={this.changeComponent} goose={this.goose.bind(this)} />

2 - 在同一文件中:

更改:

<VoterScreen sendData={this.props.goose}/>

致:

<VoterScreen sendData={this.props.goose.bind(this)}/> [谢谢克里斯]。

3 - 在 top-bar.js :

更改:

onPress={this.props.parentToggle.bind(this)}

致:

onPress={this.props.parentToggle} [感谢爱德华]。

Answer 1

在像这样传递之前尝试绑定(bind)范围...

<VoterScreen sendData={this.props.goose.bind(this)}/>