【React Native】this.test()とthis.test.bind(this)の違いとは？

Question

TouchableHighlightがクリックされるとモーダルが表示されるようにしたくて、
最初onPressの部分をthis.test()としていたのですが、これだとクリックのタイミングではなく
コンポーネントがマウントされた際にモーダルが表示されてしまいました。
その後添付のコードのようにbindの書き方を見つけ実行したところうまくいったのですが、
なぜ最初の書き方だとうまくいかず、bindするとうまくいくのかよくわかりません。

class HomeCommunity extends React.Component {
  componentWillMount() {
    this.state = {
      img: '',
    };
  }

  componentDidMount() {
    this.getImage(this.props);
  }

  getImage(props) {
    const storageRef = firebase.storage().ref();
    const imgRef = storageRef.child(`communities/${props.community.img8}`);
    imgRef.getDownloadURL().then((url) => {
      this.setState({ img: url });
    }).catch((error) => {
      console.log('Error getting document:', error);
    });
  }

  test() {
    const { modalSwitch } = this.props;
    modalSwitch(true);
  }

  render() {
    const { community, modalSwitch } = this.props;
    const { img } = this.state;
    return (
      // ここのonPressの箇所が今回の問題
      <TouchableHighlight onPress={this.test.bind(this)}>
        <View style={styles.container}>
          <View style={styles.titleView}>
            <Text style={styles.title}>{community.name}</Text>
          </View>
          <View>
            <Image style={styles.img} source={{ uri: img }} />
          </View>
        </View>
      </TouchableHighlight>
    );
  }
}

const mapStateToProps = () => ({});

const mapDispatchToProps = (dispatch) => ({
  modalSwitch: (bool) => {
    dispatch({ type: 'MODAL_SWITCH', payload: { bool } });
  },
});

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: '100%',
    height: Dimensions.get('window').height,
  },
  titleView: {
    position: 'absolute',
    top: 10,
    left: 10,
    width: '100%',
    height: 300,
    zIndex: 99,
  },
  title: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  img: {
    width: '100%',
    height: Dimensions.get('window').height,
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(HomeCommunity);

Answer 1

イベントリスナー (test()) における this には、onPress="this.test()" のようなシンプルな呼び出し方をすると、イベントを発火した要素 (<TouchableHighlight />) が強制的に代入されます。これを「thisを束縛する」「thisが束縛される」というような言い方をします。
結果、 const { modalSwitch } = this.props; の部分が <TouchableHighlight />.props のような形になってしまって意図した動きになっていないものと思います。

func.bind(thisObj) は、関数 func を呼び出す際、その呼出先の中における this に何を代入するかを指定しています。
onPress={this.test.bind(this)} の時点での this は自分自身
(HomeCommunityインスタンス) ですね。「自分自身の中の test() を呼び出す、その test() の中における this には自分自身を代入する」というような意味になります。

同様に、 onPress={() => this.test()} とすることもできます。これはアロー関数と呼ばれるもので、 function() { ... } を () => { ... } のように短縮して書くことができる記法ですが、アロー関数は「thisを束縛しない」ので、呼び出された先の test() の中の this に強制的に何かが代入されることもなく、無事に自分自身を参照してくれます。

Comments

[nakamu]

遅くなり大変申し訳ありませんでした！
まさかthisがそっちを指してるとは。
大変勉強になりました。ありがとうございます。

> イベントを発火した要素 (<TouchableHighlight />) が強制的に代入されます。これを「thisを束縛する」 「thisが束縛される」というような言い方をします。
> 結果、 const { modalSwitch } = this.props; の部分が <TouchableHighlight />.props のような形になってしまって意図した動きになっていないものと思います。