ReactJS не может вызвать функцию после загрузки страницы - PullRequest
Новая
       30

ReactJS не может вызвать функцию после загрузки страницы

0 голосов
/ 30 сентября 2019

Мне нужно обновить стили классов кнопок после загрузки страницы. Попытка сделать это в Render (), и я видел, как люди говорят о setTimeout и setInterval, но этот другой способ с событием работает в течение некоторого временикарта все в рендере. Мне нужно проверить локальное хранилище и тому подобное, и хочу обновить цвет кнопки и текст, поэтому я перепробовал много вещей, но потом попробовал window.addeventlistener ... this.handleload

Кажется, работает только частьтого времени ... это происходит слишком быстро, я не хочу добавлять таймеры как "хак", но я застрял, не зная, как это сделать.

Я также пытался вызывать функции в рендере. Не уверен, почему это так сложно сделать. 

handleLoad() {
    alert('always runs from outside loop');

    // loop ONLY runs after refreshing browser several times
    for (var i = 0; i < this.state.data.length; i++) {
       //rarely makes it in 
       alert('made it');
       document.getElementById("4534552").classList.remove('btn-warning');
    }
 }

componentDidMount() {

     webApi.get('sai/getofflinemembers?userId=N634806')
            .then((event) => { 
            //........
    }


    // THIS is what i call 
    window.addEventListener('load', this.handleLoad);

}



render() {

    const contents = this.state.data.map(item => (
        <button id={item.Member_ID} type="button" onClick={(e) => this.downloadUser(item.Member_ID,e)} 
              className="btn btn-warning">Ready for Download</button>
    )
}

Мне просто нужно вызвать функцию, перебрать все DOM и изменить ее при необходимости. Теперь я подумал о том, как реагировать на создание виртуального DOM, к которому я не знаю.

Необходимость проверить локальное хранилище, если элемент уже установлен, затем установить класс кнопки начальной загрузки на определенный цвет итекст, а также.

Мысли?

1 Ответ

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

Просто совет: если вы хотите манипулировать DOM, лучше использовать refs вместо document.getElementById. https://reactjs.org/docs/glossary.html#refs

Но вашу проблему можно решить, используя state для хранения класса css: 

class SomeComponent extends React.Component {

  state = {
    buttonCSSClass: 'btn btn-warning',
  }

  componentDidMount() {
        webApi.get('sai/getofflinemembers?userId=N634806')
            .then((event) => {})
            .then(() => this.setState({buttonCSSClass: 'btn'})) // it will update the css class
        }
  }

  render() {
    const { data, buttonCSSClass } = this.state
    return data.map(item => (
      <button
        key={item.Member_ID}
        id={item.Member_ID}
        type="button"
        onClick={e => this.downloadUser(item.Member_ID, e)}
        className={buttonCSSClass} 
      >
        Ready for Download
      </button>
    ))
  }
}
...