React.JS - multiple elements sharing a state ( How do I modify only one of the elements without affecting the others? )

问题

    class App extends Component {
       constructor(props) {
       super(props);
       this.state = { Card: Card }
      }
      HandleEvent = (props) => {
        this.SetState({Card: Card.Active}
         }
      render() {
       return (
         <Card Card = { this.state.Card } HandleEvent={ 
       this.handleEvent }/>
         <Card Card = { this.state.Card } HandleEvent={
       this.handleEvent }/>
       )
      }
    }
     const Card = props => {
        return (
        <div style={props.state.Card} onClick={ 
            props.HandleEvent}>Example</div>
         )
       }

Every time I click on one of the cards all of my elements change states, how do I program this to only change card that I clicked?

回答1:

Here's a working example

import React, { Component } from 'react'
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      0: false,
      1: false
    };
  }

  handleEvent(idx) {
    const val = !this.state[idx];
    this.setState({[idx]: val});
  }

  render() {
    return (
      <div>
        <Card state={this.state[0]} handleEvent={()=>this.handleEvent(0) } />
        <Card state={this.state[1]} handleEvent={()=>this.handleEvent(1) } />
      </div>
    ); 
  }
}

const Card = (props) => {
  return (<div onClick={() => props.handleEvent()}>state: {props.state.toString()}</div>);
}

You can also see it in action here

Obviously this is a contrived example, based on your code, in real world application you wouldn't store hardcoded state like {1: true, 2: false}, but it shows the concept

回答2:

It's not completely clear from the example what is the Card in the constructor. But here the example of how you can modify clicked element.

Basically you can keep only index of clicked element in parent's state, and then pass it as some property to child component, i.e. isActive here:

const cards = [...arrayOfCards];

class App extends Component {
   constructor(props) {

   super(props);
   this.state = { activeCardIndex: undefined }
  }
  HandleEvent = (index) => {
    this.SetState({
      activeCardIndex: index
    });
  }
  render() {
   return ({
      // cards must be iterable
      cards.map((card, index) => {
        return (
          <Card
            key={index}
            Card={Card}
            isActive={i === this.state.activeCardIndex}
            HandleEvent={this.HandleEvent.bind(this, index)}
          />
        ); 
      })
   });
  }
}

const Card = props => {
  // style active card
  const style = Object.assign({}, props.Card, {
    backgroundColor: props.isActive ? 'orange' : 'white',
  });

  return (
  <div style={style} onClick={ 
      props.HandleEvent}>Example</div>
   )
 }

来源：https://stackoverflow.com/questions/43917249/react-js-multiple-elements-sharing-a-state-how-do-i-modify-only-one-of-the-e