子どものクラス名を変更するバブルアップ状態

Question

階層の各階層ごとに6つの列に分解されたデータの階層があります。ユーザが選択をクリックすると、選択された場所が動的css classNameと対応するデータのリストによって強調表示されます。私はハイライトを各選択のために動かす方法を考え出しました。ただし、ユーザーが階層の先頭で戻ってきた場合、最後のハイライトがstateに保持されます。

たとえば、国、州、市の階層があり、私はUSA、California、LAを選択しました。別の国を選択してから米国に戻ると、カリフォルニアは引き続き強調表示されます。すべての列でclassNameを変更するにはどうすればよいですか？

私は、泡立つ状態についていくつかの同様の投稿があることを認識しています。私は通常の例よりも子供を1人増やす必要があるので、私のシナリオにそれらを適用する方法を理解することができませんでした。

コード構造： App.js、LocationList.js、Location.js

LocationList.js

class LocationList extends Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      title: props.title, 
      clicked: false, 
     }; 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick(selectedItem) { 
     this.props.onListClick(selectedItem) 
     this.setState({clicked: selectedItem}) 
    } 

    isSelected(location){ //current selected item is highlighted 
     if(location.LocationId === this.state.clicked.LocationId){ 
      return 'highlight' 
     } 
     else {return 'no_highlight'} 
    } 

    return(..//other info.. 
       <Location 
        location={location} 
        key={location.LocationId+location.LocationName} 
        tier={this.props.level} 
        handler={this.handleClick} 
        highlightClass={this.isSelected(location)} 
        /> 

Location.js

class Location extends Component { 
    constructor(props) { 
     super(props); 
     this.state={ 
      locationsList: props.locationList 
     } 
     this.onClick = this.onClick.bind(this);  
    } 

    onClick(selectedItem) { 
     this.props.handler(this.props.location); 
    }; 

    render() { 
     let location = this.props.location; 
     console.log(this.props)  

     return(
      <div 
       id="item" 
       style={locationStyle} 
       key={location.LocationId} 
       value={location.Name} 
       level={location.Level} 
       onClick={this.onClick} 
       className={this.props.highlightClass} 
      > 
       {location.LocationName} 
      </div> 
     ); 
    } 
    } 

App.js - これは私はつまらない。

handleClick(selectedItem) { 
// See value user clicked 
console.log('Selected location: ', selectedItem) 
} 

render() { 
     return(
      <div className="row"> 
      <LocationList key="1" level="1" title="Country" lis={this.state.column Tier1} onListClick={this.handleClick}/> 
      <LocationList key="2" level="2" title="State" lis={this.state.column Tier2} onListClick={this.handleClick}/> 
      <LocationList key="3" level="3" title="City" lis={this.state.column Tier3} onListClick={this.handleClick}/> 
    </div> 
); 

}

App.css

.no_highlight { 
    background-color: transparent 
} 
.highlight { 
    background-color: #007dc34d 
} 

Answer 1

ストアApp状態における全体の選択は、対応するLocationListに適切な選択をダウン渡します。最後に、それはバブルの状態まで、複数のレベル可能ですが、より良いオプションは、[再来]（HTTPSのような、より堅牢な状態管理ソリューションに移行するかもしれない

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     ... 
     selection: { 
     country: null, 
     state: null, 
     city: null 
     } 
    }; 

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

    handleClick(getSelection) { 
    return location => { 
     const selection = getSelection(location); 
     this.setState({ 
     selection: Object.assign({}, this.state.selection, selection) 
     }; 
    }; 
    } 

    render() { 
    return (
     <div> 
     ... 
     <LocationList title="Country" 
         selection={this.state.selection.country} 
         onClick={this.handleClick(country => ({ country, state: null, city: null }))} 
         // other props 
     /> 
     <LocationList title="State" 
         selection={this.state.selection.state} 
         onClick={this.handleClick(state => ({ state, city: null }))} 
         // other props 
     /> 
     <LocationList title="City" 
         selection={this.state.selection.city} 
         onClick={this.handleClick(city => ({ city }))} 
     /> 
     </div> 
    ); 
    } 
}