如何在React上阅读关于事件的道具 [英] How to read props on event on React

问题描述

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

I creating chat system by React and Firebase.
The data of chat stystem is managemented by Firebase RealTimeDatabase.
Now site here
URL: https://react-chat-b0e8a.firebaseapp.com/
Github: https://github.com/kaibara/React-chat

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

I'm trying to implement the delete button, but I do not know how to make the child component event read the parent componentthis.props. As a solution to this, I was thinking to have this.props read in front of render. But I do not know how to do it. Can you share the solution to this problem in the following code?

App.js -parenet组件

App.js - parenet component

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

请借给我您的知识.
谢谢.

Please lend me your knowledge.
Thank you.

推荐答案

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

Implement the handler in your parent component and pass the reference down to child component has props

在 App 组件中实现 onRemoveClick()，然后将"props"中的处理程序引用传递给 ChatMessage 组件.

implement onRemoveClick() in App component and pass the handler refrence in `props' to ChatMessage component.

应用程序组件:

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

ChatMessage:

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.

Note: Don't use the index of the map has a key to the components in the map, its an antipattern, it should be proper unique id's.

这篇关于如何在React上阅读关于事件的道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！