反應-冒泡狀態以更改子類的className

Question

我有一個數據層次結構，每個層次結構分為6列。 當用戶單擊其選擇時，將通過動態css className突出顯示其選擇的位置，並顯示相應的數據列表。 我想出了如何使每個選擇高亮顯示的方式。 但是，如果用戶從層次結構的開頭重新開始，它將保持狀態的最后一個突出顯示。

例如，如果我具有國家，州，城市的層次結構，並且選擇了美國，加利福尼亞州，洛杉磯。 如果我選擇其他國家，然后單擊返回美國，則加利福尼亞州仍將突出顯示。 如何更改所有列的className？

我意識到關於起泡狀態也有幾篇類似的文章。 我還無法弄清楚如何將它們應用於我的場景，因為我需要比平常的例子多抱一個孩子。

代碼結構：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 。 最后，為LocationList點擊實施不同的處理程序以重置狀態

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