切换div的背景色 [英] Toggle background color of divs
问题描述
我正在映射一个div，因此它将根据我数据库中的数据量进行渲染.就我而言，我的div渲染了4次.(这是一个民意测验，有4个选项.)
I'm mapping a div so it would render according to the amount of data i have in my database. In my case my div render 4 times. (This is a poll which has 4 options.)
我将逐步解释我的问题.
I will explain my question in steps.
1)我想为div设置与我得到的ID相匹配的背景色页面加载时从数据库中访问.我是这样做的
1) I want to set background color for the div which matches the id i'm getting from the database when the page loads. I did it like this
componentDidMount() {
let sel3 = document.getElementById(this.props.voted_id);
if (sel3) {
sel3.style.backgroundColor = "#0b97c4";
sel3.style.color = "#FFFFFF";
}
}
这里 this.props.voted_id 是我从数据库获取的ID.(这是用户选择的投票选项的ID.因此在componentDidMount上，我通过为其设置背景色来显示所选选项)
here this.props.voted_id is the id i'm getting from the database. (It is the id of the poll option user has selected. So on componentDidMount i'm displaying the selected option by setting a background color to it)
2)如果用户想要更改其选择，则可以通过单击新选项来更改它.我想为用户选择的新选择设置背景色，同时我想删除先前选择的选择的背景色.我正在这样做
2) If the user wants to change his/her choice user can change it by clicking on the new choice. I want to set background color to the new choice user selected and in the same time i want to remove the background color of the previously selected choice. I'm doing it like this
我的组件
render() {
let {contents, submitvote, postId, voted_id} = this.props
return (
<div className="txt_vote_bar_div" id={this.props.contents.post_poll_content_id}>
<p className="txt_vote_choice" id={this.props.contents.post_poll_content_id}
onClick={() => {
this.handleClick(this.props.contents.post_poll_content_id);
}}>
{contents.content}
</p>
<p className="txt_tot_votes"> {this.props.contents.votes_percentage}%
({this.state.voteCount} Votes)</p>
</div>
);
};
在handleClick函数上，我正在执行以下操作
On handleClick function i'm doing the following
handleClick(id) {
let sel = document.getElementById(this.props.voted_id);
if (sel) {
alert("1");
sel.style.backgroundColor = "#FFFFFF";
sel.style.color = "#6a6a6a";
}
let sel2 = document.getElementById(this.props.getVoteStatus);
if (sel2) {
alert("2");
sel2.style.backgroundColor = "#FFFFFF";
sel2.style.color = "#6a6a6a";
}
let el = document.getElementById(id);
if (el) {
alert("3");
this.setState({
active: false,
})
el.style.backgroundColor = "#0b97c4";
el.style.color = "#FFFFFF";
}
let sel3 = document.getElementById(id);
if (sel3.id == this.props.getVoteStatus && this.state.active == false) {
alert("4");
this.setState({
active: true,
})
sel3.style.backgroundColor = "#FFFFFF";
sel3.style.color = "#6a6a6a";
}
}
这里 this.props.voted_id 是我从数据库中获取的选择ID(我使用此ID在 componentDidMount 上设置背景)
here this.props.voted_id is the id of choice i'm getting from the database (i use this id to set a background on componentDidMount)
此处 this.props.getVoteStatus 是该选项的先前选择的ID，当用户选择新选项时，我将使用该ID删除背景色.
here this.props.getVoteStatus is the previously selected id of the choice which i'm using to remove the background color when user selects a new choice.
到目前为止，我已成功完成此操作，没有任何问题.但是我的问题是这个
Upto this point i'm doing this successfully with no issues. But my problem is this
当页面加载并且如果我从数据库中获得一个id时，那个带有id的特定div是彩色的.但是，当用户选择相同的选项(以撤回其选择)时
When the page loades and if i get a id from the database , that particular div with the id is colored.That is ok. But when user selects the same choice (to retract his/her choice)
这部分代码应正常运行(因为用户选择的div ID与我从数据库中获取的ID相同)
this piece of code runs as it should (Because the user selected div id is same as the id i'm getting from the database)
let sel = document.getElementById(this.props.voted_id);
if (sel) {
alert("2");
sel.style.backgroundColor = "#FFFFFF";
sel.style.color = "#6a6a6a";
}
然后这段代码运行
let el = document.getElementById(id);
if (el) {
alert("1");
this.setState({
active: false,
})
el.style.backgroundColor = "#0b97c4";
el.style.color = "#FFFFFF";
}
此问题仅在页面加载后一次出现.在这种情况下，代码的两个部分均有效.因此，它既运行又运行.我该如何解决这个问题?
This problem comes only one time after the page loads. In that instance both part of codes are valid. Therefore it runs the both. How can i fix this problem?
更新
这就是我映射div元素的方式
This is how i'm mapping my div element
export const TextVoteList = ({postData, submitvote}) => {
const dataUnavailable = (
<div>
<p>
There are no voting options available available
</p>
</div>
);
const dataAvailable = (
<div>
{postData.post_poll_content.map(contents => <TextVoteOptions key={contents.post_poll_content_id} voted_id={postData.personal_vote} contents={contents} submitvote = {submitvote} postId = {postData._id}/>)}
</div>
);
return (
<div>
{postData.post_poll_content.length === 0 ? dataUnavailable : dataAvailable}
</div>
);
};
TextVoteOptions 代码
render() {
alert(this.props.getVoteResponse);
let {contents, submitvote, postId, voted_id} = this.props
return (
<div key={this.props.contents.post_poll_content_id} className= {(this.state.voted_id === this.props.contents.post_poll_content_id && this.state.active) ? "txt_vote_bar_div active" : "txt_vote_bar_div"}>
<p className="txt_vote_choice" id={this.props.contents.post_poll_content_id}
onClick={() => {
this.handleClick(this.props.contents.post_poll_content_id);
}}>
{contents.content}
</p>
<p className="txt_tot_votes"> {this.props.contents.votes_percentage}%
({this.state.voteCount} Votes)</p>
</div>
);
};
我的点击处理程序
handleClick(id) {
let vote_object = {
voting_object: id,
post_id: this.props.postId
}
this.setState({
voted_id: id,
active: (id != this.state.voted_id) ? true : !this.state.active
});
this.props.submitvote(vote_object);
}
推荐答案
您应该避免自己进行实际的DOM操作.让React处理实际的DOM操作.根据我的理解，我的设计如下.请尝试联系.希望这会有所帮助.
You should avoid actual DOM manipulations on your own. Let React take care of actual DOM manipulation. As per my understanding, I have designed as below. Please try and relate. Hope this helps.
在您的问题中，我不了解状态'active'的用法，因此我未在以下代码段中使用.这就是您要达到的目标.
In your question, I didn't understand the usage of state 'active', So i have not used in the below snippet. Is this what you are trying to acheive.
const contents = [
{
post_poll_content_id: 1,
content: "Soccer",
votes_percentage: 60
},
{
post_poll_content_id: 2,
content: "Cricket",
votes_percentage: 20
},
{
post_poll_content_id: 3,
content: "Basketball",
votes_percentage: 20
}
];
const votedId = 3; // Assume this is coming from database;
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
voteCount: 100,
voted_id: props.voted_id,
active:true
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(id) {
this.setState({
voted_id: id,
active: (id != this.state.voted_id) ? true : !this.state.active
});
}
render() {
let {contents, voted_id} = this.props;
return (
<div>
{contents.map((content, index) => {
return (
<div key={index} className= {(this.state.voted_id===content.post_poll_content_id && this.state.active) ? "txt_vote_bar_div active" : "txt_vote_bar_div"}
id={content.post_poll_content_id}
>
<p
className="txt_vote_choice"
id={content.post_poll_content_id}
onClick={() => {
this.handleClick(content.post_poll_content_id);
}}
>
{content.content}
</p>
<p className="txt_tot_votes">
{content.votes_percentage % this.state.voteCount} Votes
</p>
</div>
);
})}
</div>
);
}
}
ReactDOM.render(<Demo contents={contents} voted_id = {votedId}/>, document.getElementById("app"));.txt_vote_bar_div {
display:block;
border:1px solid #eee;
margin: 10px;
width:20%;
text-align:center;
}
.active {
background-color:#0b97c4;
color:#FFF;
}
.txt_vote_choice {
color:'blue';
cursor:pointer;
text-decoration:underline;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>这篇关于切换div的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
