Javascript 如何将子组件值传递给父组件

我有以下代码

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;

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;

从“React”导入React；
导入“../styles/Chat.css”；
从“../services/Web”导入Web；
类Chat扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
消息：“”
};
this.sendMessage=this.sendMessage.bind（this）；
}
发送消息（）{
this.props.updatecommentText（this.refs.newText.value，this.props.index）；
this.setState（{msg:''}）；
}
render（）{
返回(
基于React的聊天机器人
{this.props.children}
发送
);
}
}
导出默认聊天；

Web.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;

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;

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“react router dom”导入{Link}；
从“../components/Chat”导入聊天；
类Web扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
留言：[“嗨，我能帮你什么忙吗？”
]
};
this.sendtobot=this.sendtobot.bind（this）；
}
sendtobot（新文本，一）{
var arr=this.state.messages
arr.push（新文本）
this.setState（{messages:arr}）
}
每个消息（消息，i）{
返回（{message}）；
}
render（）{
返回(
{this.state.messages.map（this.eachMessage.bind（this））}
)
}
}
导出默认网页；

我想从Chat.js获取输入，并将其发送到Web.js并将该值推送到数组消息，然后在Chat.js的

this.props.children

中再次呈现该数组

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;

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;

但是，在运行代码时，我收到一个错误

this.props.updatecommentText不是函数。

---

有人能帮我一下吗。

您可以使用redux作为全局状态将子组件状态传递给父组件。

您可以使用redux作为全局状态将子组件状态传递给父组件。

您已经绑定了

这个。sendtobot

两次。它应该只在构造函数中。 像这样

每个消息（消息，i）{
返回(
{message}
);
}

您必须绑定

此。发送到bot

两次。它应该只在构造函数中。 像这样

每个消息（消息，i）{
返回(
{message}
);
}

您的代码似乎正常工作。 是一个包含代码的沙箱

我不确定它是否能像你所期望的那样工作，但它没有错误

您的代码似乎正常工作。 是一个包含代码的沙箱

我不确定它是否能像你所期望的那样工作，但它没有错误

通过更改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>
    )
  }

sendtobot（新文本，i）{
this.setState（{messages:[…this.state.messages，newText]}）
}
每个消息（消息，i）{
返回（{message}
）；
}
render（）{
返回(
{this.state.messages.map（this.eachMessage.bind（this））}
)
}

通过更改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>
    )
  }

sendtobot（新文本，i）{
this.setState（{messages:[…this.state.messages，newText]}）
}
每个消息（消息，i）{
返回（{message}
）；
}
render（）{
返回(
{this.state.messages.map（this.eachMessage.bind（this））}
)
}

你能解释一下吗？或者举个例子。这似乎是个错误的建议。为什么要通过使用URL参数或引入redux来实现这一点？react没有提供这样做的方法吗？那么react没有实现这样的功能吗？请您解释一下，或者举个例子。这似乎是一个不好的建议。为什么要通过使用URL参数或引入redux来实现这一点？react没有提供这样做的方法吗？那么react没有实现这样的功能吗？正如下面@bamse所指出的，这似乎是可行的：它确实有一些奇怪的代码，但在功能上是可行的。你确定你没有遗漏什么吗？正如下面@bamse所指出的，这似乎是可行的：它确实有一些奇怪的代码，但在功能上是可行的。你确定你没有漏掉什么吗？是的…我只是看到了是的…我只是看到它工作了…但是它从聊天窗口出来了它工作了…但是它从聊天窗口出来了