Question

大家好，这是我的App.js类。

import React, { Component } from 'react';
import { Widget, addResponseMessage, setQuickButtons, toggleMsgLoader } from '../index';

class Calender extends React.Component {
 state = {
 startDate: new Date()
};
handleChange = date => {
this.setState({
  startDate: date,
 });
};
 render() {
  return (
  <div>
 <form className="rcw-sender" onSubmit= {this.props.handleNewUserMessage}>
  <DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    />
    <button type="submit" className="rcw-send">
      <img src={submit} className="rcw-send-icon" alt="send" />
    </button>
  </form>
   </div>
   );
  }
 }


export default class App extends Component {
componentDidMount() {
  addResponseMessage('Welcome to this awesome chat!');
}
handleNewUserMessage = (newMessage) => {    
toggleMsgLoader();
setTimeout(() => {
  toggleMsgLoader();      
  if (newMessage === 'Enter your date') {
  renderCustomComponent(Calender)

  } else {
    addResponseMessage(newMessage);
  }
 }, 2000);
}
 handleQuickButtonClicked = (e) => {
  addResponseMessage('Selected ' + e);
  setQuickButtons([]);
 }
 render() {
   return (
    <Widget
      title="Bienvenido"
      subtitle="Asistente virtual"
      senderPlaceHolder="Escribe aquí ..."
      handleNewUserMessage={this.handleNewUserMessage}
      handleQuickButtonClicked={this.handleQuickButtonClicked}
      badge={1}
    />
   );
   } 
  }

现在我的意图是我想将Calendar组件的输出发送到App类handleNewUserMessage函数，这意味着用户将使用Calendar组件进入DOB，然后提交将直接转到App类handleNewUserMessage函数。应用类功能的DOB值

谢谢

Answer 1

渲染组件时

<Calender />

将功能handleDateSet传递为prop

<Calender handleDateSet={this.handleDateSet}>

然后在您的handleChange

handleChange = date => {
  this.props.handleDateSet(date); // this will send date to parent prop
  this.setState({
  startDate: date,
  });

};

我建议您在继续学习之前阅读React文档中的lifting state up。

祝你好运！

如何在React JS中的另一个类中调用函数

1 个答案: