@D_K_D
Чайник

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

У меня есть два файла с компонентами. При нажатие "Назад" в первом файле срабатывает функция onStop() , я хочу чтобы при нажатии во втором файле на кнопку "Вход" тоже срабатывала функция onStop() в первом файле;
Вот первый файл в нём я запускаю функцию onStop() при нажатии на кнопку "Назад"
import './App.css';
import React, {useState , Component} from "react";
class Example extends React.Component {
  constructor() {
    super();
    this.state = { 
      seconds: 10 ,  
      isTimerActive: false
    };
    this.timer = 0;
    this.startTimer = this.startTimer.bind(this);
    this.countDown = this.countDown.bind(this);
    this.onClick = this.onClick.bind(this);
    this.onStop = this.onStop.bind(this);
  }
  onStop() {
    clearInterval(this.timer);
    this.setState({ startTimer: false , countDown: false, isTimerActive:false});
  }

  onClick(){
    this.state.seconds = 10;
    this.timer = 0
    this.setTimerActive(true);
    setTimeout(this.setTimerActive, 10000, false); 
    this.startTimer()
  }

  setTimerActive = isTimerActive => {
    this.setState(() => ({ isTimerActive }));
  }

  startTimer() {
    if (this.timer == 0 && this.state.seconds > 0) {
      this.timer = setInterval(this.countDown, 1000);
    }
  }

  countDown() {
    console.log("hgg" , Date.now())
    let seconds = this.state.seconds - 1;
    this.setState({
      seconds: seconds,
    });
    if (seconds == 0) { 
      clearInterval(this.timer);
    }
  }

  render() {
    return(
      <div >
          { this.state.isTimerActive ? 
          <span pointer-events= 'none'>Смс отправлено повторноа отправка возможно через {this.state.seconds}</span>
          : 
          <span onClick={this.onClick.bind(this)}>Получить код повторно</span> }
          <div>
            <a onClick={this.onStop.bind(this)}>Назад</a>
          </div>
      </div>
    );
  }
}
export default Example;


Вот второй файл в нём при нажатии на кнопку 'Вход' должна срабатывать функция onStop() в первом файле :
class Auth extends Component {
render() {
    return (
         <div>
              <button type="button"
                     onClick={this.onStop()} >
                           Войти
            </button>
          </div>
  );
}
}
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега JavaScript
CEO iAmStudio, предприниматель.
Лезть в реакт без базового понимания, как работает JS смертельно опасно. Функция, точнее метод onStop это часть класса Example (первый файл). Ты можешь вынести ее вне класса, и экспортировать. И импортировать где надо.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы