在React中单击组件时将类添加到同级中

Question

I'm working on building my portfolio using React.js. In one section, I have four components laid out in a grid. What I want to do achieve is when one component is clicked, a css class is added to the siblings of this component so that their opacity is reduced and only the clicked component remains. In jQuery, it would be something like $('.component').on('click', function(){ $(this).siblings.addClass('fadeAway')}). How can I achieve this effect? Here is my code, thanks in advance for any and all help!

class Parent extends Component{
  constructor(){
    super();
    this.state = {fadeAway: false}
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(){
    //Add class to siblings
  }
  render(){
    const array = ["Hello", "Hi", "How's it going", "Good Times"]
    return(
      array.map(function(obj, index){
        <Child text={obj} key={index} onClick={() => this.handleClick} />
      })
    )
  }
}

Answer 1

A working example for this problem could look something like this, with a marginally more complex initialization array:

class Parent extends Component{
  constructor(){
    super();
    this.state = {
      elements: [
        {
          id: "hello",
          text: "Hello",
          reduced: false,
        },

        {
          id: "hi",
          text: "Hi",
          reduced: false,
        }

        {
          id: "howsItGoing"
          text: "How's it going",
          reduced: false,
        }

        {
          id: "goodTimes",
          text: "Good Times",
          reduced: false,
        }
      ],
    }

    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(e){
    // copy elements from state
    const elements = JSON.parse(JSON.stringify(elements));
    const newElements = elements.map(element => {
      if (element.id === e.target.id) {
        element.reduced = false;
      } else {
        element.reduced = true;
      }
    });


    this.setState({
      elements: newElements,
    });
  }

  render(){
    return(
      this.state.elements.map(function(obj, index){
        <Child
          id={obj.id}
          text={obj.text}
          reduced={obj.reduced}
          key={index}
          onClick={() => this.handleClick} />
      });
    );
  }
}

Then you would just add a ternary, like so, to the Child component:

<Child
  id={this.props.id}
  className={this.props.reduced ? "reduced" : ""} />

This adds a bit more boilerplate than other examples, but it's extremely brittle to tie business logic to the text inside a component, and a stronger solution requires a stronger piece of identification, like an ID or class on the rendered DOM element. This solution also, if you so wish, easily allows you to expand your logic so that more than one element can remain at maximum opacity at once.

Answer 2

I would simply store in state index of selected item, and then pass fadeAway prop into Child component defined as

fadeAway={this.state.selectedIndex !== index}

After that you only need to set a fade-away class in Child based on this.prop.fadeAway and define necessary CSS rules.

Here is how it could look in your case:

 class Parent extends React.Component{ constructor () { super(); this.state = {selectedIndex: null} } handleClick (selectedIndex) { this.setState({ selectedIndex }) } render () { const array = ["Hello", "Hi", "How's it going", "Good Times"] return ( <div> {array.map((obj, index) => { const faded = this.state.selectedIndex && this.state.selectedIndex !== index return <Child text={obj} fadeAway={faded} key={index} onClick={() => this.handleClick(index)} /> })} </div> ) } } class Child extends React.Component { render () { return ( <h2 onClick={this.props.onClick} className={this.props.fadeAway ? 'fade-away' : ''}> {this.props.text} </h2> ) } } ReactDOM.render( <Parent />, document.body ); 

 .fade-away { opacity: 0.3; } 

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

Answer 3

You can achieve that using using a toggle variable :

handleClick(){
  this.setState({fadeAway} => ({
    fadeAway: ! fadeAway
  )};
}
...
<Child
  text={obj}
  key={index}
  onClick={() => this.handleClick}
  className={this.state.fadeAway? 'class1' : 'class2'}/>

Answer 4

I perfer use state like currentWord to save the word was clicked in Parent component, presudo code is like below:

class Parent extends Component {
  constructor(){
    super();
    this.state = {
      fadeAway: false,
      currentWord: ''
    };
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(currentWord){
    this.setState({
      currentWord: currentWord,
    });
  }
  render(){
    const array = ["Hello", "Hi", "How's it going", "Good Times"]
    const currentWord = this.state.currentWord;
    return(
      array.map(function(obj, index){
        <Child currentWord={currentWord} text={obj} key={index} onClick={() => this.handleClick} />
      })
    )
  }
}

And in Child component

class Child extends Component {
  // some other code

  handleClick(e) {
    this.props.handleClick(e.target.value);
  }

  render() {
    const isSelected = this.props.text === this.props.currentWord;
    // use isSelected to toggle className

    <div
      onClick={this.handleClick.bind(this)}
    >{this.props.text}
    </div>
  }
}