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

将整个选择存储在x="search='something something' replace='something' subject=/path/path" eval "$x" echo $search # prints something # etc. # (I am trying to do something here) # So the following wouldn't print **something** anymore echo $search状态，然后将相应的选择传递给相应的App。最后，为LocationList次点击实施不同的处理程序以重置状态

LocationList

React - 冒泡状态以更改子级上的className

1 个答案: