如何在反應js中調用另一個class中的function

Question

大家好，這是我的 App.js class。

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}
    />
   );
   } 
  }

Now my intention is i want to send Calendar component output that means date of birth to App class handleNewUserMessage function.User will entered DOB by using Calendar component and then submitted it will directly go to the App class handleNewUserMessage function.How to send the DOB value應用程序 class function

謝謝

Answer 1

當你渲染你的組件

<Calender />

傳遞一個 function handleDateSet 作為道具

<Calender handleDateSet={this.handleDateSet}>

然后在你的 handleChange

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

};

我建議你在繼續之前閱讀 React 文檔中的提升 state 。

祝你好運！