Javascript React.JS-共享一个状态的多个元素（如何只修改其中一个元素而不影响其他元素？） 类应用程序扩展组件{ 建造师（道具）{ 超级（道具）； this.state={Card:Card} } HandleEvent=（道具）=>{ this.SetState（{Card:Card.Active} } render（）{ 返回( ) } } 康斯特卡=道具=>{ 返回( 例子 ) }

每次我点击其中一张卡片时，我的所有元素都会改变状态，我如何编程使其仅改变我点击的卡片？

从示例中不完全清楚构造器中的卡片是什么。但这里是如何修改点击元素的示例

基本上，您可以只将单击元素的索引保持在父元素的状态，然后将其作为某个属性传递给子组件，即

isActive

此处：

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

const cards=[…arrayOfCards]；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={activeCardIndex:undefined}
}
HandleEvent=（索引）=>{
这是我的国家({
activeCardIndex：索引
});
}
render（）{
返回({
//卡片必须是易读的
卡片.地图（（卡片，索引）=>{
返回(
); 
})
});
}
}
康斯特卡=道具=>{
//样式活动卡
const style=Object.assign（{}，props.Card{
背景颜色：props.isActive？“橙色”：“白色”，
});
返回(
例子
)
}

下面是一个工作示例

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

import React，{Component}来自“React”
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
0:错,，
1:错
};
}
扶手通风口（idx）{
const val=！this.state[idx]；
this.setState（{[idx]：val}）；
}
render（）{
返回(
this.handleEvent（0）}/>
this.handleEvent（1）}/>
); 
}
}
康斯特卡=（道具）=>{
返回（props.handleEvent（）}>state:{props.state.toString（）}）；
}

你也可以看到它的作用

显然，这是一个人为的例子，基于您的代码，在实际应用程序中，您不会像

{1:true，2:false}

那样存储硬编码状态，但它显示了这个概念

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