javascript - 子组件不会在React中加载父组件的事件

我通过React创建聊天应用程序。
在聊天应用程序中，有一个用于输入user_name和text的字段。
我考虑过要使用state管理这些数据，我创建了onNameChange和onTextChange事件。
但是，在我创建的代码中，已加载onTextChange但未加载onNameChange。

我知道同一文件中的onTextChange将被加载。
即使文件不同，但我认为如果父子之间存在关系，则可以通过道具交换数据。
我以这样的认可描述了代码，但是我无法获得预期的结果。

如何通过LogoutStateForm.js将数据从user_name传递到ChatForm.js中的onNameChange？

ChatForm.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 ChatForm 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 ChatForm

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

请借给我你的智慧。
谢谢。

最佳答案

首先，在ChatForm.js中，呈现的是LoginStateForm而不是LogoutStateForm。

其次，假设它应该是LogoutStateForm，则在ChatForm组件上，将onNameChange作为onClick传递给LogoutStateForm。
但是，您在LogoutStateForm中以onNameChange的形式访问道具，这是错误的。您应该将其作为您提供的道具名称来访问，即this.props.onClick。

希望能帮助到你。

关于javascript - 子组件不会在React中加载父组件的事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54939332/