javascript - How to set a class name for a div dynamically in react js - Stack Overflow

admin管理员组

文章数量:1332865

How to set a class name for a div dynamically in react.js. I have five div with the same class name. I want to rotate a div which I am clicking. I tried to achieve through using state like:

handleClick(event) {
    this.setState({rotate: true})
}

handleFlip(event) {
    this.setState({rotate: false})
}

render() {
    return(
        <div className={rotate ? 'flip' : ''}></div>
    )
}

When I click the div, all divs with the same class name are rotating. But I want to rotate the div which I am clicking.

How to set a class name for a div dynamically in react.js. I have five div with the same class name. I want to rotate a div which I am clicking. I tried to achieve through using state like:

handleClick(event) {
    this.setState({rotate: true})
}

handleFlip(event) {
    this.setState({rotate: false})
}

render() {
    return(
        <div className={rotate ? 'flip' : ''}></div>
    )
}

When I click the div, all divs with the same class name are rotating. But I want to rotate the div which I am clicking.

• javascript
• reactjs

Share Follow edited Dec 14, 2017 at 11:40 Abbas 14.4k66 gold badges4242 silver badges7575 bronze badges asked Dec 14, 2017 at 11:36 Developer StrangeDeveloper Strange 2,19888 gold badges3333 silver badges4747 bronze badges 1

• You should already have a reference to the source element that the click event originates? Have you looked at what properties exist on the event object and handle the render function inside the function? – Luke Stoward Commented Dec 14, 2017 at 11:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You need to store the id of the div clicked instead of boolean as you need some way of determining which div was clicked. These id can be obtained from the event object or passed directly to the handleClick function whichever seems feasible to you. Also id can be anything that uniquely identifies the div.

you could do it like

class App extends React.Component {
  state = {
    rotated: ''
  }
  handleClick = (event)  => {
    const id = event.target.getAttribute('data-id');
    this.setState({ rotate: id })
  }

  render() {
    const {rotate} = this.state;
    return (
      <div style={styles} onClick={this.handleClick}>
        <div data-id="1" className={rotate === "1" ? 'flip' : ''}>Hello</div>
        <div data-id="2" className={rotate === "2" ? 'flip' : ''}>Hello</div>
        <div data-id="3" className={rotate === "3" ? 'flip' : ''}>Hello</div>
        <div data-id="4" className={rotate === "4" ? 'flip' : ''}>Hello</div>
        <div data-id="5" className={rotate === "5" ? 'flip' : ''}>Hello</div>
        <div data-id="6" className={rotate === "6" ? 'flip' : ''}>Hello</div>
        <h2>Start editing to see some magic happen {'\u2728'}</h2>
      </div>
    )
  }
}

Problem is, you are controlling all the div by a single state bool, that's why all the divs are rotating at the same time.

Solution:

Instead of maintaining a single bool in state, store some unique identity of clicked div, and apply the class name if state value matches to div unique value.

Like this:

<div id='first' className={rotate=='first' ? 'flip' : ''}></div>
<div id='second' className={rotate=='second' ? 'flip' : ''}></div>
<div id='third' className={rotate=='third' ? 'flip' : ''}></div>
<div id='four' className={rotate=='four' ? 'flip' : ''}></div>
<div id='five' className={rotate=='five' ? 'flip' : ''}></div>

And inside onClick store that unique value in state:

handleClick(event) {
    this.setState({rotate: event.target.id})
}

Update:

Since you are generating the divs dynamically, you can assign the indexes, like this:

a=[1,2,3,4];
a.map((el, i) => <div id={i} key={i} className={rotate==i ? 'flip' : ''}></div>)

Solution demo - https://codesandbox.io/s/73znpxwn2j

React Component File -

import React from 'react';

class Hello extends React.Component{
  constructor(props){
    super(props);
    this.state ={
      rotate: true
    }
  }
  handleClick(event) {
    this.setState({ rotate: true })
  }

  handleFlip(event) {
    this.setState({ rotate: false })
  }

  render() {
    return (
      <div className={this.state.rotate ? 'flip' : ''}>Hello
      </div>
    )
  }
}

render(<Hello />, document.getElementById('root'));

Html File -

  <style>
.flip{
  color:red;
}
</style>

本文标签： javascriptHow to set a class name for a div dynamically in react jsStack Overflow