Question

我通过React和Firebase创建聊天系统。
聊天系统的数据由Firebase RealTimeDatabase管理。
现在在这里
网址：https://react-chat-b0e8a.firebaseapp.com/
GitHub：https://github.com/kaibara/React-chat

我正在尝试实现删除按钮，但是我不知道如何使子组件event读取父组件this.props。为了解决这个问题，我想在this.props前面读render。但是我不知道该怎么做。您可以在以下代码中分享解决此问题的方法吗？

App.js-Parenet组件

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

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

Answer 1

在父组件中实现处理程序，并将引用向下传递给具有props的子组件

在 App 组件中实现onRemoveClick()，并将处理程序引用“ 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。

如何在React上阅读关于事件的道具

1 个答案: