ReactJS如何將子組件值傳遞給父組件

Question

我有以下代碼

chat.js

import React from 'react';
import '../styles/Chat.css';
import Web from '../services/Web';

class Chat extends React.Component {

 constructor(props) {
    super(props);

    this.state = {
        msg:''
    };
    this.sendMessage = this.sendMessage.bind(this);
 }

 sendMessage () {
    this.props.updatecommentText(this.refs.newText.value, this.props.index);
    this.setState({ msg: '' });
 }

 render() {
   return (
     <div className="Chat-container">
      <div className="Chat-row">
        <div className="Chat-column">
          <div className="Chat-card">
            <div className="Chat-body">
               <div className="Chat-title">React Based Chatbot</div>
               <div className="Chat-messages">
                 { this.props.children } 
           </div>
           </div>
            <div className="Chat-footer">
                  <textarea className="Chat-input" ref="newText"></textarea>
                  <button className="Chat-submit" onClick={this.sendMessage} defaultValue={ this.props.children }>Send</button>
            </div>
          </div>
        </div>
      </div>
     </div>
   );
 }
}


export default Chat;

Web.js

import React, { Component } from 'react';
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import Chat from '../components/Chat';

class Web extends React.Component {

   constructor(props){
      super(props);

      this.state = {
         messages:["Hi, How can I help you ?"
         ]
      };
      this.sendtobot = this.sendtobot.bind(this);
  }

  sendtobot(newText, i){
     var arr = this.state.messages
     arr.push(newText)
     this.setState({messages: arr})
  }

  eachMessage(message, i){
        return (<Chat key={i} index={i} updatecommentText={ this.sendtobot.bind(this) }>{ message }</Chat>);
  }

  render(){
     return(
       <div>
         {this.state.messages.map(this.eachMessage.bind(this))}
       </div>
     )
  }

}

export default Web;

我想從Chat.js中獲取輸入並將其發送到Web.js ，並將該值推入數組消息中，然后再次在Chat.js的this.props.children中呈現該數組。

但是，在運行代碼時，出現錯誤this.props.updatecommentText is not a function. 有人可以幫我嗎

Answer 1

您已兩次綁定this.sendtobot 。 它應該只在構造函數中。 像這樣

eachMessage(message, i) { return ( <Chat key={i} index={i} updatecommentText={this.sendtobot} > { message } </Chat> ); }

Answer 2

您的代碼似乎可以正常工作。 這是包含您的代碼的沙箱。

我不確定它是否可以正常工作，但是沒有錯誤。

Answer 3

通過更改Web組件中的這3個功能，它開始看起來像只有一個文本區域的聊天

  sendtobot(newText, i) {
    this.setState({ messages: [...this.state.messages, newText] })
  }

  eachMessage(message, i) {
    return (<p>{message}</p>);
  }

  render() {
    return (
      <div>
        {this.state.messages.map(this.eachMessage.bind(this))}
        <Chat updatecommentText={this.sendtobot}/>
      </div>
    )
  }

Answer 4

您還可以將redux用作全局狀態，將子組件的狀態傳遞給父組件。