如何在 React 上读取事件的props

IT技术 javascript reactjs firebase
2021-04-28 08:28:18

我通过React创建聊天系统Firebase
聊天系统的数据由Firebase RealTimeDatabase.
现在网站这里
URL:https:
//react-chat-b0e8a.firebaseapp.com/ Github:https : //github.com/kaibara/React-chat

我正在尝试实现删除按钮,但我不知道如何让子组件event读取父组件this.props为了解决这个问题,我想this.propsrender. 但我不知道该怎么做。你能在下面的代码中分享这个问题的解决方案吗?

App.js - 父组件

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

const messagesRef = firebaseDB.ref('messages')

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text : "",
      user_name: "",
      messages: []
    }
  }
  componentWillMount() {
    messagesRef.on('child_added', (snapshot) => {
      const m = snapshot.val()
      let msgs = this.state.messages
      msgs.push({
        'text' : m.text,
        'user_name' : m.user_name,
        'key': snapshot.key
      })
      console.log({msgs})
      this.setState({
        messages : msgs
      })
      console.log(this.state.messages)
    })
  }
  render() {
    return (
      <div className="App">
        <div className="MessageList">
          <h2>メッセージログ</h2>
          {this.state.messages.map((m, i) => {
            return <ChatMessage key={i} messages={m} />
          })}
        </div>
      </div>
    )
  }
}

export default App

ChatMessage.js - 子组件

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

const messagesRef = firebaseDB.ref('messages')

class ChatMessage  extends Component {
  onRemoveClick(){
    messagesRef.child(this.props.messages.key).remove()
    // I want to load `this.props.messages.key` here
  }
  render(){
    return(
      <div className="Message">
        <p>{this.props.messages.key}</p>
        <p className="MessageText">{this.props.messages.text}</p>
        <p className="MessageName" style={user}>by&nbsp;{this.props.messages.user_name}</p>
        <button className="MessageRemove" onClick={this.onRemoveClick}>削除</button>
      </div>
    )
  }
}

export default ChatMessage

请把你的知识借给我。
谢谢你。

1个回答

在父组件中实现处理程序并将引用传递给子组件 has props

onRemoveClick()App组件中实现并将 `props' 中的处理程序引用传递给ChatMessage组件。

应用组件:

 deleteMessageHandler = (key) =>{
    const messages = [...this.state.messages];
    messages = messages.splice(key,1);
    this.setState({messages:messages});
  }

聊天消息:

render() {
    return (
      <div className="App">
        <div className="MessageList">

          {this.state.messages.map((m, i) => {
            return <ChatMessage key={i} messages={m} deleteMessageHandler={this.deleteMessageHandler}/>
          })}
        </div>
      </div>
    )
  }

注意:不要使用地图的索引,它具有地图中组件的键,它是一个反模式,它应该是正确的唯一 id。