React.JS - 상태를 공유하는 여러 요소 (다른 요소에 영향을 미치지 않고 요소 중 하나만 수정하면 어떻게됩니까?)

Question

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

모든 요소 중 하나를 클릭 할 때마다 요소가 상태를 변경합니다. 내가 클릭 한 카드 만 바꾸도록 프로그램 하시겠습니까?

Answer 1

는 작업 예를

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

입니다 당신은 또한 그것을 실제로 볼 수 있습니다. here

분명히 이것은 당신의 코드에 기초한 현실 세계의 ap입니다 당신은 {1: true, 2: false}과 같이 하드 코딩 된 상태를 저장하지 않지만,

의 개념을 보여줍니다.

Answer 2

예제에서 생성자의 카드가 무엇인지 명확하게 알 수 없습니다. 그러나 여기에 클릭 된 요소를 수정하는 방법에 대한 예가 있습니다. 기본적으로

당신이 부모의 상태에서 클릭 요소의 인덱스를 유지하고 하위 구성 요소에 대한 몇 가지 속성으로 전달할 수, 여기 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> 
    ) 
}