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

Question

[Daniil]

У меня есть два файла с компонентами. При нажатие "Назад" в первом файле срабатывает функция 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>
  );
}
}

Answer 1

[Арсений Матыцин]

Лезть в реакт без базового понимания, как работает JS смертельно опасно. Функция, точнее метод onStop это часть класса Example (первый файл). Ты можешь вынести ее вне класса, и экспортировать. И импортировать где надо.

Comments

[Daniil]

Да понимаю но мне пример нужен .

[Алексей Уколов]

Ты можешь вынести ее вне класса, и экспортировать. И импортировать где надо.

Работать всё при этом перестанет, но вынести можно, да.

[Арсений Матыцин]

Алексей Уколов, угу, это уже второй пунктик.

Daniil, тебе будет проще объявить такой же метод в другом классе. Это не та функция, которая что-то возвращает, а напрямую работает с состояниями.

[Daniil]

Арсений Матыцин, мне нужно чтобы при нажатии на кнопку во втором файле , в первом менялись значения

[Арсений Матыцин]

Daniil, читай документацию, тебе нужны пропсы, поднятие событий, можно и redux прикрутить.