在React中單擊組件時將類添加到同級中

Question

我正在使用React.js構建我的投資組合。 在一節中，我將四個組件布置在一個網格中。 我要做的是單擊一個組件時，將一個CSS類添加到該組件的同級中，以降低其不透明度，僅保留被單擊的組件。 在jQuery中，它類似於$（'。component'）。on（'click'，function（）{$（this）.siblings.addClass（'fadeAway'）}）。 我怎樣才能達到這種效果？ 這是我的代碼，在此先感謝您提供的所有幫助！

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

這個問題的可行示例可能看起來像這樣，帶有稍微復雜一些的初始化數組：

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} />
      });
    );
  }
}

然后，您只需向Child組件添加一個三元，就像這樣：

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

與其他示例相比，這增加了一些樣板，但是將業務邏輯綁定到組件內部的文本非常脆弱，並且更強大的解決方案需要更強大的標識，例如呈現的DOM元素上的ID或類。 如果您願意的話，此解決方案還可以輕松地擴展您的邏輯，以使多個元素可以一次保持最大不透明度。

Answer 2

我只是將其存儲在所選項目的狀態索引中，然后將fadeAway傳遞fadeAway定義為

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

之后，您僅需要基於this.prop.fadeAway在Child中設置一個fade-away類，並定義必要的CSS規則。

這是您情況下的外觀：

 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

您可以使用切換變量來實現：

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

Answer 4

我認為使用諸如currentWord類的currentWord來保存在Parent組件中單擊的單詞，presudo代碼如下所示：

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} />
      })
    )
  }
}

在子組件中

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