Question

如何在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。

Answer 1

您需要存储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>
    )
  }
}

Answer 2

问题是，你用一个状态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>

在onClick中存储状态中的唯一值：

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

<强>更新

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

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

Answer 3

解决方案演示 - https://codesandbox.io/s/73znpxwn2j

反应组件文件 -

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>

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

3 个答案: