ReactJS 似乎无法在页面加载后调用函数

Question

我需要能够在页面加载后更新按钮 class 样式。尝试在 Render() 中执行此操作，我看到人们谈论 setTimeout 和 setInterval，但这种事件的另一种方式在部分时间有效

ComponentDidMount 使 axios web api 调用抓取数据，并且在地图中所有内容都在渲染中。我需要检查本地存储等，并想更新按钮颜色和文本，所以我尝试了很多东西，但后来尝试了 window.addeventlistener ... this.handleload

似乎只在部分时间工作....它好像发生得太快了，我不想像计时器一样添加 "hack"，但我不知道该怎么做做这个。

我也尝试在渲染器中调用函数。不知道为什么这很难做到。

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。

如果已经设置了成员，则需要检查本地存储，然后将 bootstrap 按钮的 class 也设置为特定的颜色和文本。

想法？

Answer 1

只是一个建议：如果你想操纵 DOM，最好使用 refs 而不是使用 document.getElementById。 https://reactjs.org/docs/glossary.html#refs

但是你的问题可以通过使用状态来存储 css class:

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

ReactJS 似乎无法在页面加载后调用函数

ReactJS cannot seem to call function after page load

javascript

jsx

twitter-bootstrap

reactjs

virtual-dom