Блог

У меня есть два компонента в моем приложении, они перечислены ниже.

Вопрос в том, как я могу запустить эту resetTime() функцию (она находится в первом компоненте) из второго компонента с помощью кнопки SAVE TIME ?

Теперь с SAVE TIME помощью кнопки я вызываю функцию tuplahomma() , которая экономит время на localstorage и сбрасывает поле входного значения.

Точка для этого — время сброса при сохранении результатов.

Первый компонент:

 class SecondTimer extends React.Component {
  constructor(props) {
    super(props);

    

    // Start funktio määrittää running arvon -> true, joka kertoo sen, että kello käy. Tallentaa tänne ajan, josta SeconTimerNumber hakee tiedon
    this.state = {
      running: false, // Alustettu falseksi, eli ohjelman avatessa kello ei käy
      currentTimeMs: 0,
      currentTimeSec: 0,
      currentTimeMin: 0,
    };
  }

  resetTime = () => {
    this.setState({
      currentTimeMs: 0,
      currentTimeSec: 0,
      currentTimeMin: 0,
    });
  };
 

У второго компонента есть кнопка SAVE TIME , с помощью которой я хочу запустить эту resetTime() функцию в первом компоненте.

   saveTime = () => {
    if (typeof Storage !== 'undefined') {
      this.saveToLocalStorage();
  
    } else {
      console.error('local storage not supported');
    }
    this.setHistoryState();
  };


  reset = () => { 
    this.setState({value: ""});
  };


  tuplahomma = () => {
    this.saveTime();
    this.reset();

  }   


  render() {
    return (
      
      <div className={'sekuntikello-list'}>
        <div className="container">
          <form id="title-value" onSubmit={this.handleSubmit} 
                disabled = "true">
            <label>
              <Form.Control className={'input-field'} placeholder="Title" type="text" value={this.state.value} onChange={this.handleChange} /></label>
          </form>
        </div>
        
        <div className={'save-reset-napit-div'}>
          
          <Button className={"save-reset-nappi"} variant="success" size="lg" onClick={this.tuplahomma}>SAVE TIME</Button>
          <Button className={"save-reset-nappi"} variant="danger" size="lg" onClick={this.resetTime}>RESET HISTORY</Button>
        </div>
        <h3>LAPS</h3>
        <div className={'tulostaulu-main'}>
          <div className={'tulostaulu'}>
            <ul>
              {this.state.history.map((item, index) => <li key={index}>{item}</li>)}
            </ul>
          </div>
        </div>
        
      </div>
    );
  }
}
 

ПРАВИЛЬНОЕ РЕШЕНИЕ:

Первый компонент, я добавил это clickResetTime={this.resetTime} туда, где я рендерил второй компонент для других целей:

 <div className={'right'}>
    <SecondTimerList
        clickResetTime={this.resetTime} // Added this one
        {...this.state}
        formatTime={this.formatTime}
    />
 </div>
 

И я добавил это clickResetTime к функции второго компонента tuplahomma() следующим образом:

 tuplahomma = () => {
    this.saveTime();
    this.reset();
    this.props.clickResetTime(); // This one
  }   
 

Передача функций в качестве реквизита

FirstComponent.js

 class FirstComponent extends React.Component {

  constructor(){
    super()
   
    this.state = {
      running: false, 
      currentTimeMs: 0,
      currentTimeSec: 0,
      currentTimeMin: 0,
    };

  }

  resetTime = () => {
    this.setState({
      currentTimeMs: 0,
      currentTimeSec: 0,
      currentTimeMin: 0,
    });
  };


  render() {
    return (
      <div className="App">
        <SecondComponent clickResetTime={this.resetTime} />
      </div>
    )
  }
}

export default FirstComponent;
 

SecondComponent.js

 class SecondComponent extends React.Component {

    …

    render() {
        return (
            <div>
                …
          <Button className={"save-reset-nappi"} variant="danger" size="lg" onClick={this.props.clickResetTime()}>SAVE TIME</Button>
                …
            </div>
        )
    }
}

export default SecondComponent;
 

Вы имеете в виду вызов двух функций при нажатии кнопки «СОХРАНИТЬ ВРЕМЯ»?

  <Button className={"save-reset-nappi"} variant="success" size="lg" onClick={() => {
      this.props.tuplahomma();
      this.props.resetTime();
    }}>SAVE TIME</Button>