javascript - 单击当前组件时删除类名称同级组件，并在当前组件中进行切换以删除其自身的类

Question

我是 react 新手，尝试制作一个按钮，如果我单击当前按钮，该按钮将删除同级类，并且当前按钮也可以删除它的自类(切换)，我已经尝试过，看来我找不到线索。这是我的代码。

export default class Child extends Component {
render(){
    return(
      <button
         onClick={this.props.onClick}
         className={this.props.activeMode ? 'active' : ''}>
         {this.props.text}
      </button>
     )
   }
}

export default class Parent extends Component {
   constructor(props) {
   super(props);
   this.state = {
     selectedIndex: null,
   };
 }

  handleClick (selectedIndex) {
   this.setState({
    selectedIndex,
   });
  }

  render () {
    const array = ["Button 1","Button 2"];
    return (
     <div>
       {array.map((obj, index) => {
       const active = this.state.selectedIndex === index;
       return <Child
       text={obj}
       activeMode={active}
       key={index}
       onClick={() => this.handleClick(index)} />
       })}
     </div>
     )
   }
 }

Answer 1

我不确定我是否理解你的明确正确性

你有没有想过这样的事情？

class Child extends React.Component {
render(){
    return(
      <button
         onClick={this.props.onClick}
         className={this.props.activeMode ? 'active' : ''}>
         {this.props.text}
      </button>
     )
   }
}

class Parent extends React.Component {
   constructor(props) {
   super(props);
   this.state = {
     selectedIndex: null,
   };
 }

  handleClick (selectedIndex) {
    let selected = this.state.selectedIndex === selectedIndex ? null : selectedIndex;	
    this.setState({
	selectedIndex: selected,
    });
  }

  render () {
    const array = ["Button 1","Button 2"];
    return (
    <div>
    {
        array.map((obj, index) => {
        return <Child text={obj}
                    activeMode={this.state.selectedIndex === index}
                    key={index}
                    onClick={() => this.handleClick(index)} />
        })
   }
   </div>
 )
   }
 }

ReactDOM.render(
  <Parent name="World" />,
  document.getElementById('container')
);

.active {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>