LoginSignup
15

More than 5 years have passed since last update.

Reactで3つのコンポーネントをstateとpropsで行き来する書き方

Last updated at Posted at 2017-05-13

これから書くこと

  • 親のコンポーネントと2つの子のコンポーネントをpropsとstateを使って行き来する
  • 子のコンポーネント1つはFormタグで住所を入力するUI
  • 子のコンポーネント1つはそのFormに入力した値を元にGoogleMapを表示するUI

※React初心者なので間違っている書き方もしれません。
ご指摘くださいますとうれしいです。

なぜ投稿しようと思ったのか

  • 自分の備忘録のため
  • 1つのコンポーネントにform系とその入力した値を表示させる参考サイトはたくさんあるが、それらを切り離した参考サイトがなかったので

環境

  • React
  • es6
  • Meteor(フレームワーク)
  • jsxに記述

親のコンポーネント

  • 入力された値を取得する
  • その入力された値をGoogleMapに返す
Parent.jsx
import React, { Component, PropTypes } from 'react';
import InputForm from './InputForm.jsx';
import GoogleMap from './GoogleMap.jsx';

export default class Parent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      inputText: '',
    };
    this.textChange = this.textChange.bind(this);
  }

  textChange(text) {
    this.setState({ inputText: text });
  }

  render() {
    return (
      <div className="google_map">
        <InputForm onChangeAddress={this.textChange} />
        <GoogleMap address={this.state.inputText} />
      </div>
    )
  }
}

子コンポーネント(Form)

  • 入力した値を親のコンポーネント「Parent」に返す(propsに返す)
  • 入力する値をstateで監視
InputForm.jsx
import React, { Component } from 'react';

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

  render() {
    return(
      <div>
        <input type="text" id="address" value={this.state.text} onChange={e => this.setState({ text: e.target.value })} />
        <button onClick={() => this.props.onChangeAddress(this.state.text)}>表示</button>
      </div>
    )
  }
}

子のコンポーネント(GogoleMap表示)

  • 親の「Parent.jsx」から入力した値をpropsとして受け取る
  • その値によってGoogleMapの表示が変わる
GoogleMap.jsx
import React, { Component, PropTypes } from 'react';

export default class GoogleMap extends Component {

  constructor(props) {
    super(props);
  }

  // フォームに入力した地域をMapに表示
  addressClick() {
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': this.props.address
    }, (result, status) => {
      if (status === google.maps.GeocoderStatus.OK) {
        map.panTo(result[0].geometry.location);
        const marker = new google.maps.Marker({
          position: result[0].geometry.location,
          map: map
        });
      } else {
        console.log('エラーです。')
      }
    });
  }

  componentDidMount() {
    const latlng = new google.maps.LatLng(35.66, 139.69);
    const options = {
      zoom: 15,
      center: latlng,
      mapTypeId: 'roadmap'
    };
    map = new google.maps.Map(document.getElementById('map'), options);
  }

  render() {
    this.addressClick()
    return (
      <div>
        <div id="map"></div>
      </div>
    )
  }
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15