Reactで親componentのeventを子componentが読み込まない時に確認すること

はじめに

Reactでチャットシステムを作成中、子componentが親componentのイベントを読み込まない事態に遭遇した。
その際に行った対処法を記録しておく。

行ったこと

this.props.~の~に記入している内容を変えた
具体的には、this.props.onNameChange → this.props.onClick

Before

App.js

import React,{Component} from 'react'
import firebase from 'firebase/app'
import { firebaseApp,firebaseDB } from '../firebase/firebase'
import LogoutStateForm from './LogoutStateForm'

const messagesRef = firebaseDB.ref('messages')

class App extends Component {
  constructor(props){
    super(props)
    this.onNameChange = this.onNameChange.bind(this)
    this.onTextChange = this.onTextChange.bind(this)
    this.state = {
      user: null,
      user_name: "",
      text: ""
    }
  }
  componentDidMount(){
    firebase.auth().onAuthStateChanged(user => {
      this.setState({ user })
    })
  }
  onNameChange(e) {
    if (e.target.name == 'user_name') {
      this.setState({
        user_name: e.target.value
      }),
      console.log(this.state.user_name);
    }
  }
  onTextChange(e) {
    if (e.target.name == 'text') {
      this.setState({
        text: e.target.value
      }),
      console.log(this.state.text);
    }
  }
  render(){
    return(
      <div id='Form'>
        {this.state.user ?
          <LogoutStateForm onClick={this.onNameChange} />:
          null
        }
        //In order to switch display depending on login availability
        <textarea name='text' onChange={this.onTextChange}  placeholder='メッセージ'/>
      </div>
    )
  }
}

export default App

LogoutStateForm.js

import React,{Component} from 'react'
import firebase from 'firebase/app'

class LogoutStateForm extends Component {
  constructor(props){
    super(props)
  }
  login() {
    const provider = new firebase.auth.GoogleAuthProvider()
    firebase.auth().signInWithPopup(provider)
  }
  componentDidMount(){
    firebase.auth().onAuthStateChanged(user => {
      this.setState({ user })
    })
  }
  render(){
    return(
      <div className='logout'>
        <input name='user_name' onChange={this.props.onNameChange} placeholder='名前'/>
        <button onClick={this.login}>Goggle Login</button>
      </div>
    )
  }
}

export default LogoutStateForm

After

App.jsに変更はなし

LogoutStateForm.js

import React,{Component} from 'react'
import firebase from 'firebase/app'

class LogoutStateForm extends Component {
  constructor(props){
    super(props)
  }
  login() {
    const provider = new firebase.auth.GoogleAuthProvider()
    firebase.auth().signInWithPopup(provider)
  }
  componentDidMount(){
    firebase.auth().onAuthStateChanged(user => {
      this.setState({ user })
    })
  }
  render(){
    return(
      <div className='logout'>
        <input name='user_name' onChange={this.props.onChange} placeholder='名前'/>
        <button onClick={this.login}>Goggle Login</button>
      </div>
    )
  }
}

export default LogoutStateForm

参考資料

Child component does not load event of parent component in React