Javascript 如何在react js中动态设置div的类名

如何在react.js中动态设置div的类名。我有五个同名的div。我想旋转我正在单击的div。我试图通过使用状态来实现以下目标：

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

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

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

---

单击div时，具有相同类名的所有div都在旋转。但是我想旋转我正在单击的div。

问题是，您通过一个状态bool控制所有div，这就是为什么所有div同时旋转的原因

解决方案：

与其在状态中维护单个bool，不如存储单击的div的一些唯一标识，并在状态值与div唯一值匹配时应用类名

像这样：

<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>

更新：

因为您是动态生成div的，所以可以分配索引，如下所示：

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

---

问题是，您正通过一个状态bool控制所有div，这就是为什么所有div同时旋转的原因

解决方案：

与其在状态中维护单个bool，不如存储单击的div的一些唯一标识，并在状态值与div唯一值匹配时应用类名

像这样：

<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>

更新：

因为您是动态生成div的，所以可以分配索引，如下所示：

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

---

您需要存储单击的div的id，而不是boolean，因为您需要某种方法来确定单击了哪个div。这些id可以从事件对象获得，也可以直接传递给handleClick函数，只要您认为可行。id也可以是唯一标识div的任何内容

你可以这样做

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

---

您需要存储单击的div的id，而不是boolean，因为您需要某种方法来确定单击了哪个div。这些id可以从事件对象获得，也可以直接传递给handleClick函数，只要您认为可行。id也可以是唯一标识div的任何内容

你可以这样做

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

解决方案演示-

反应组件文件-

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文件-

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

解决方案演示-

反应组件文件-

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文件-

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

---

您应该已经有了对源元素的引用，而源元素是click事件的发源地？您是否查看了事件对象上存在哪些属性并在函数中处理渲染函数？您应该已经有了对click事件起源的源元素的引用？您看过事件对象上存在哪些属性并在函数中处理渲染函数了吗？div是基于json数据动态生成的。您可以分配任何内容，比如索引，它将是唯一的，并在应用类之前检查0,1,2值。@Kallis检查更新部分，如何应用索引：当然，我会检查。。Thank.div是基于json数据动态生成的。您可以分配任何内容，如索引。它将是唯一的，并在应用类之前检查0,1,2值。@Kallis检查更新部分，如何应用索引：当然，我会检查。。谢谢。演示不起作用，代码也没有解决div太多的问题。嘿，你有没有试着改变状态，然后看看代码是否起作用。因为我在这里发布之前进行了测试。这是为了与handleClick和handleFip一起工作。否则，您只是在测试React。另外，问题是动态呈现多个div，一次只翻转一个div。它们显然不起作用，因为我没有处理事件或方法，因为我检查了骨架，看看类名是否接受演示不起作用的名称，代码也没有解决多个div的问题。嘿，您是否尝试更改状态，然后查看代码是否有效。因为我在这里发布之前进行了测试。这是为了与handleClick和handleFip一起工作。否则，您只是在测试React。另外，问题是动态呈现多个div，并且一次只翻转一个div。它们显然不起作用，因为我没有处理事件或方法，因为我检查了骨架以查看类名是否接受该名称