Question

我在组件中渲染了重复的元素。当我单击特定组件时，应仅在特定组件上显示弹出窗口。现在我收到了所有元素的弹出消息。如何清除这个问题？

class Display extends component{
 constructor(props){
   super(props);
   this.state={showResult:false}; 
}
renderList(){
return this.props.cars.attribute.map((car) => {
  return (
    <div key={car.attribute_name}  className="col-sm-4" >
        <div className="panel-body back-img" onClick={()=> this.setState({showResult:true})}>
           <div className="row">
                <div className="col-sm-6 incrementer">
                  <span className="titleclass"> Hala </span>
                </div>
            </div>
        </div>
     </div>   { this.state.showResults ? <Results /> : null }
   )}}}

   class Results extends Component{
    render(){
     return(<div id="results" className="search-results">
        Some Results
           </div>); }}

Answer 1

通过唯一属性标识点击的节点，例如attribute_name：

return this.props.cars.attribute.map((car) => {
  return (
    <div key={car.attribute_name}  className="col-sm-4" >
        <div className="panel-body back-img" onClick={()=> this.setState({showResult:true, attributeName: car.attribute_name})}> // store the current car.attribute_name in the state
           <div className="row">
                <div className="col-sm-6 incrementer">
                  <span className="titleclass"> Hala </span>
                </div>
            </div>
        </div>
     </div>   { this.state.showResults && this.state.attributeName === car.attribute_name ? <Results /> : null } // only show results if the current attribute name in the state is the same as the item's
   )}}}

仅在所选元素上显示弹出窗口

1 个答案: