Question

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

我在加载页面时使用temppollId设置div的背景颜色，并在使用pollId点击时更改div的背景颜色。

我的问题是这只能工作一次，因为我无法将最后选择的div id设置为temppollId函数中的handleClick。当我选择一个新div时，如何删除以前彩色div的颜色。

感谢。

Answer 1

调用prevState时我会查看参数this.setState()（参见下文）。当你在反应中更新状态时，你必须要小心，你真的想要遵循他们的文档。否则，它可能变得不稳定和错误，并且它的代码更难以遵循。此外，请注意，在做出反应时直接进行DOM操作也不是最佳做法（即，除非您重新安装整个应用程序，否则不惜一切代价避免document.getElementById()。

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

我会考虑更多地阅读他们的文档。

将先前的值设置为reactjs中的状态

1 个答案: