Toggle Hintergrundfarbe von divs

Question

Ich bin ein DIV zuordnen, so würde es entsprechend der Menge der Daten, die ich in meiner Datenbank habe. In meinem Fall rendert mein div 4 mal. (Dies ist eine Umfrage, die 4 Optionen hat.)

Ich werde meine Frage in Schritten erklären.

1) Ich möchte Hintergrundfarbe für das div, das die ID entspricht, ich bekomme aus der Datenbank, wenn die Seite geladen wird. Ich habe es wie diese

componentDidMount() { 

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

      if (sel3) { 

       sel3.style.backgroundColor = "#0b97c4"; 
       sel3.style.color = "#FFFFFF"; 
      } 
     } 

hier this.props.voted_id ist die ID, ich bin aus der Datenbank zu bekommen. (Es ist die ID der Wahloption, die der Benutzer gewählt hat. Also auf componentDidMount werde ich die gewählte Option anzeigen, indem ich eine Hintergrundfarbe einstelle)

2) Wenn der Benutzer seine/ihre Wahl ändern möchte, kann der Benutzer ändern es durch Klicken auf die neue Wahl. Ich möchte die Hintergrundfarbe für den ausgewählten neuen Benutzer festlegen und gleichzeitig die Hintergrundfarbe der zuvor ausgewählten Auswahl entfernen. Ich mache es wie diese

meine Komponente

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

On handelte Funktion

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"; 
    } 

    } 

hier this.props.voted_id die folgenden

ich tue ist die ID der Wahl bin immer i von der Datenbank (ich benutze diese ID, um einen Hintergrund auf componentDidMount zu setzen)

hier this.props.getVoteStatus ist die zuvor ausgewählte ID der Wahl, die ich benutze, um die Hintergrundfarbe zu entfernen, wenn der Benutzer eine neue Auswahl auswählt.

Bis zu diesem Punkt mache ich das erfolgreich ohne Probleme. Aber mein Problem ist das

Wenn die Seite loades und wenn ich eine ID aus der Datenbank, dieses bestimmte div mit der ID ist farbig. Das ist in Ordnung. Aber wenn der Benutzer die gleiche Wahl wählt (seiner/ihrer Wahl zurückzuziehen)

dieses Stück Code läuft, wie es sollte (weil der Benutzer ausgewählt div id ist die gleiche wie die id ich bin aus der Datenbank bekommen)

let sel = document.getElementById(this.props.voted_id); 
     if (sel) { 
      alert("2"); 
      sel.style.backgroundColor = "#FFFFFF"; 
      sel.style.color = "#6a6a6a"; 
     } 

und dass nach diesem Stück Code läuft

let el = document.getElementById(id); 
     if (el) { 
      alert("1"); 
      this.setState({ 
       active: false, 
      }) 
      el.style.backgroundColor = "#0b97c4"; 
      el.style.color = "#FFFFFF"; 
     } 

Dieses Problem nur einmal nach dem Laden der Seite kommt. In diesem Fall sind beide Teile der Codes gültig. Daher läuft es die beiden. Wie kann ich dieses Problem beheben?

UPDATE

Dies ist, wie ich bin meine 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 Code

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

meine Click-Handler

Mapping

Answer 1

Sie sollten die eigentlichen DOM-Manipulationen auf eigene Faust vermeiden. Lassen Sie React sich um die eigentliche DOM-Manipulation kümmern. Nach meinem Verständnis habe ich wie folgt gestaltet. Bitte versuche es und erzähle es dir. Hoffe das hilft.

In Ihrer Frage habe ich nicht die Verwendung von Status 'aktiv' verstanden, also habe ich nicht im folgenden Ausschnitt verwendet. Ist das, was Sie versuchen zu erreichen?

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>