Как вызвать функцию в другом классе в реакции JS - PullRequest
Новая
       15

Как вызвать функцию в другом классе в реакции JS

0 голосов
/ 23 октября 2019

Привет всем. Это мой класс 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, который означает дату рождения, в функцию класса handleNewUserMessage класса App. Пользователь будет вводить DOB с помощьюКомпонент календаря, а затем отправленный, он непосредственно перейдет в функцию handleNewUserMessage класса приложения. Как отправить значение DOB в функцию класса приложения

Спасибо

1 Ответ

3 голосов
/ 23 октября 2019

Когда вы визуализируете свой компонент 

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

};

Я предлагаю вам прочитать поднятие состояния в разделе Реагировать на документы, прежде чем двигаться вперед.

Удачи!

...