將之前的值設置爲某個狀態

我有一個div映射，所以它會根據從數據庫發送的數據呈現任意次數。我在div中設置一個背景顏色，與我從後端獲得的id匹配。將之前的值設置爲某個狀態

我想要做的是設置一個背景顏色到新的div我選擇並刪除先前選定的div的背景顏色。我正在做這樣的

 constructor(props) { 

       super(props); 

       this.state = { 

        pollId: this.props.contents.post_poll_content_id, 
        temppollId: this.props.voted_id 

       } 

    } 

    componentDidMount() { 

       let el = document.getElementById(this.props.voted_id); 

       if (el) { 

        el.style.backgroundColor = "#0b97c4"; 
       } 

    } 

    handleClick(id) { 

        this.setState({ 

        pollId: id, 

        }) 

       let el = document.getElementById(this.state.pollId); 

       if (el) { 

        el.style.backgroundColor = "#0b97c4"; 

       } 

       let sel = document.getElementById(this.state.temppollId); 

       if (sel) { 

        sel.style.backgroundColor = "#FFFFFF"; 

       } 

       this.props.submitvote(vote_object) 

     } 

     render() { 

       let {contents, submitvote, postId, voted_id} = this.props 

       return (

        <div className="txt_vote_bar_div" style={{ 
         color: voted_id === this.state.pollId ? 'white' : '#9da0a4' 
        }} id={this.state.pollId}> 
         <p className="txt_vote_choice" 
          style={{color: voted_id === this.state.pollId ? '#FFFFFF' : '#6a6a6a'}} 
          id={"id" + this.state.pollId} 
          onClick={() => { 
           this.handleClick(this.state.pollId); 

          }}> {contents.content} </p> 
         <p className="txt_tot_votes" 
          style={{color: voted_id === this.state.pollId ? '#FFFFFF' : '#6a6a6a'}}> {contents.votes}% 
          (Votes:)</p> 
        </div> 
       ); 
      }; 
     }

我已經爲加載頁面，並使用pollId上點擊時更改div的背景顏色，當使用temppollId在div的背景顏色。

我的問題是這個作品只有一次，因爲我無法將最後選定的div ID設置爲函數中的temppollId。我如何刪除以前彩色div的顏色，當我選擇一個新的div。

謝謝。

來源

2017-08-17 CraZyDroiD

我不能完全弄清楚上下文;需要更多細節。什麼是'el'？ 'sel'？其他divs在哪裏？但是有一些觀察：1）你在'handleClick'中調用'setState'，但是你將'pollId'設置爲相同的值，因爲你傳遞'this.state.pollId'作爲參數每次。 2）如果你的'pollId'狀態永遠不變，爲什麼不直接使用道具呢？ 3）感覺你喜歡混合React風格的代碼和非React代碼（做'getElementById'並直接設置顏色，而不是從父組件控制這些元素）。 – philraj

我打電話給this.setState()（參考下面）時會查看參數prevState。當你更新狀態時你必須小心，你真的想跟隨他們的文檔。否則，它會變得越來越笨拙，而且它更難以遵循。另外，請注意，在反應中進行直接DOM操作也不是最佳實踐（即，除非您安裝了整個應用程序，否則不惜一切代價避免document.getElementById()）。

https://facebook.github.io/react/docs/react-component.html#componentdidupdate

我會考慮通過一般更多的文檔的那麼順利。

來源

2017-08-17 04:47:14

將之前的值設置爲某個狀態

回答

相關問題