Дочерний компонент не загружает событие родительского компонента в React

Question

Я создаю приложение чата 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

Пожалуйста, одолжите мне свою мудрость.
Спасибо.

Answer 1

В ChatForm.js вы рендерите неправильный компонент, это должен быть LogoutStateForm.

Во-вторых, вы должны получить доступ к пропущенной вами опоре.

ChatForm.js

<LogoutStateForm onNameChange={this.onNameChange} />

В LogoutStateForm.js

render(){
    return(
      <div className='logout'>
        <input name='user_name' onChange={this.props.onNameChange} placeholder='名前'/>
        <button onClick={this.login}>Goggle Login</button>
      </div>
    )
  }

Кроме того, определите PropTypes в LogoutStateForm.js для проверки проверки типа.

https://reactjs.org/docs/typechecking-with-proptypes.html

Answer 2

Во-первых, в ChatForm.js то, что вы отображаете LoginStateForm, а не LogoutStateForm.

Во-вторых, предполагая, что это LogoutStateForm, в компоненте ChatForm вы передаете onNameChange как onClick для LogoutStateForm.Однако вы получаете доступ к реквизитам как onNameChange в LogoutStateForm, что неправильно.Вы должны получить к нему доступ в качестве имени реквизита, которое вы даете, это this.props.onClick.

Надеюсь, это поможет.