javascript - 如何在 React JS 中为 div 动态设置类名

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 而不是 bool 值，因为您需要某种方法来确定单击了哪个 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>
    )
  }
}