反应 onClick 将类添加到单击的元素但从其他元素中删除答案

【问题标题】：React onClick add class to clicked element but remove from the others反应 onClick 将类添加到单击的元素但从其他元素中删除
【发布时间】：2020-09-30 05:19:03
【问题描述】：

所以我在这里尝试实现的目标与 Transition flex-grow of items in a flexbox 此处所做的非常相似

但我想知道如何使用 React 来完成，说我有这个代码

class MyComponent extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        classNameToUse: ''
    };

    this.onElementClicked = this.onElementClicked.bind(this);
}

onElementClicked() {
    this.setState({ classNameToUse : 'big-size'})
}

render() {

    return (
        <div>
            <div className={this.state.classNameToUse} onClick={this.onElementClicked} >
              something
            </div>
            <div className={this.state.classNameToUse onClick={this.onElementClicked} >
               something else
            </div>
        </div>
       );
    }
}

这当然会为它们添加类名，但我想要实现的是它们中的一个随着动画而变大，而另一个则崩溃。如果我有 2 个或 10 个元素，这并不重要

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

const { useState, useEffect } = React;

const App = () => {
  const [divs,] = useState(['blue', 'green', 'black']);
  const [selected, setSelected] = useState(null);
  
  const onClick = (id) => {
    setSelected(id);
  }
  
  return <div className="container">
    {divs.map(pr => <div key={pr} style={{background: pr}} className={`box ${pr === selected ? 'selected' : ''}`} onClick={() => onClick(pr)}></div>)}
  </div>
}

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

.container {
  display: flex;
  height: 200px;
}

.box {
  flex: 1;
  cursor: pointer;
  transition: all .3s ease-in;
}

.selected {
  flex: 2;
}

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script src="https://unpkg.com/material-ui-lab-umd@4.0.0-alpha.32/material-ui-lab.development.js"></script>
<div id="root"></div>

【讨论】：

【解决方案2】：

您可以在点击时设置活动索引：

// State
this.state = {
  activeIndex: null
};
// event
onElementClicked(e) {
  this.setState({ activeIndex: e.target.index })
}
// class to use
className={this.index === this.state.activeIndex ? 'big-size' : ''}

【讨论】：