将之前的值设置为某个状态

我有一个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

将之前的值设置为某个状态

回答

相关问题