0

react-nativeを用いてコンポーネント間の値のやりとりをしたいと思いっています。
子コンポーネントのイベントから親コンポーネントのchangecountを実行して、親コンポーネントの{selectedTab:0}を更新。sub2をタップした回数をAppでインクリメントしてSub1に表示することを期待していますが、render()は一度しか呼ばれてないようです。setState()を実行すれば、そのコンポーネントと子コンポーネントのrender()が実行されるという認識なので間違っていたらご指摘お願いします。

    export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {selectedTab:0};
      }
      changecount(){
        count = this.state.selectedTab;
        this.setState({selectedTab:count+1});

      }
      render() {
        console.log(this.stae) //undefined
        return (
          <View style={styles.container} >
            <View style={styles.sub1}>
              <Sub1 selectnow={this.state.selectedTab}/>
            </View>
          <View style={styles.sub2}>
           <Sub2 method={this.changecount}/>
             </View>
           </View>
        );
      }
    }

    class Sub1 extends Component{
      constructor(props) {
        super(props);
      }
      render(){
        return(
          <Text>{this.props.selectnow}</Text>
          );
      }
    }
    class Sub2 extends Component{
        constructor(props) {
        super(props);
      }

      render(){
        return(
        <TouchableHighlight onPress={this.props.method.bind(this)}>
          <View style={styles.substyle}>
            <Text>sub2</Text>
          </View>
       </TouchableHighlight>
          );
      }
    }

1 件の回答 1

2

react-nativeは知らずreactだけ知っててお答えしますが、

setState()を実行すれば、そのコンポーネントと子コンポーネントのrender()が実行されるという認識なので

この認識は間違っていないと思います。

App Component内で

<Sub2 method={this.changecount}/>

としていますが、このchangecountAppインスタンスにbindする必要があるかと思います。

  constructor(props) {
    super(props);
    this.state = {selectedTab:0};
    this.changecount = this.changecount.bind(this);
  }

とするかまたはArrow functionを用いて

  changecount = () => {
    count = this.state.selectedTab;
    this.setState({selectedTab:count+1});
  }

とするかまたはrender関数内でbindします。

  render() {
    console.log(this.stae) //undefined
    return (
      <View style={styles.container} >
        <View style={styles.sub1}>
          <Sub1 selectnow={this.state.selectedTab}/>
        </View>
      <View style={styles.sub2}>
       <Sub2 method={this.changecount.bind(this)}/>  // <- here
         </View>
       </View>
    );
  }
}

そしてSub2内では

<TouchableHighlight onPress={this.props.method.bind(this)}>

逆にbindするとまずいので、外しましょう。

<TouchableHighlight onPress={this.props.method}>
1
  • 3パターン全てで期待通りの動作を確認しました。ありがとうございます。 bindの使い方を誤っていたようなのでもう一度勉強してきます。
    – nom
    Commented 2017年10月15日 16:20

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。