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中，呈现的是LoginStateForm而不是LogoutStateForm。

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

希望有帮助。

Answer 2

在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>
    )
  }

此外，在LogoutStateForm.js中定义PropTypes以验证类型检查。

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

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

2 个答案: