顯示隱藏內容點擊反應JS

在React JS中有一個數組對象，我想循環它。顯示隱藏內容點擊反應JS

我的代碼如下：

let data = [ 
    {make: "Volkswagen", models: ["Golf", "Passat", "Polo", "Tiguan"]}, 
    {make: "Skoda", models: ["Fabia", "Octavia", "Superb"]}, 
    {make: "Audi", models: ["A1", "A3", "A5", "Q3", "Q5"]} 
];  

export default class makeModel extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      show: false, 
      make: null 
     } 
    } 

    handleMake(event){ 
     event.preventDefault(); 
     this.setState({make: event.target.name, show: !this.state.show}); 
    } 

    render() { 
     const language = this.props.language; 
     let style = {display: "none"}; 

     if(this.state.show) style = {display: "block"}; 
     return (
      <div> 
       <div className="priceTitle">{language.makeAndModel}</div> 
       {data.map((car, i) => { 
        return (
         <div key={i} className="makeModel"> 
          <Link to="/" className="make" name={car.make} onClick={this.handleMake.bind(this)}>{car.make}</Link> 
          <div className="models" style={style}> 
           {car.models.map((m, i) => { 
            if(car.models.indexOf(m) > -1 && car.make === this.state.make){ 
             return <div key={i}>{m}</div> 
            } 
           })} 
          </div> 
         </div> 
        ) 
       })} 
      </div> 
     ); 
    } 
}

我想告訴所有品牌的名單。然後點擊我想顯示比所有的模型。

我的代碼有效。但onClick有三個顯示類模型的div。但只有在點擊的模型顯示。如何用類模型隱藏所有這些div並只顯示點擊的模型？

一般來說，有沒有更好的方法來做到這一點？

來源

2016-09-05 Boky

讓你的部件儘可能的小，這使得很多更容易處理狀態的變化。如果您不想顯示某些內容，則也可以返回null而不是使用樣式更改。 onClick處理程序可以作爲道具給予，也可以將當前品牌作爲道具給予。所以你可以把你的組件分解成BrandList，然後呈現一個BrandComponent，它呈現一個ModelList，它呈現一個Model。當前品牌可以在ModelList狀態下處於BrandLIst，當前模型狀態，並且可以通過支持 – Icepickle

獲得更多信息：https：//medium.com/@dan_abramov/smart -and啞組件 - 7ca2f9a7c7d0＃.88fbrrv76 – Icepickle

試試這個：

import React from 'react'; 

let data = [ 
{make: "Volkswagen", models: ["Golf", "Passat", "Polo", "Tiguan"]}, 
{make: "Skoda", models: ["Fabia", "Octavia", "Superb"]}, 
{make: "Audi", models: ["A1", "A3", "A5", "Q3", "Q5"]} 
]; 

const ModelLink = ({models,make,handleMake,isDisplay}) => { 

const modelList = isDisplay ? models.map((m, i) => <div key={i}>{m}</div>) : ""; 

return (
    <div className="makeModel"> 
      <h3 to="/" className="make" name={make} onClick={handleMake}>{make}</h3> 
      <div className="models" > 
       {modelList} 
      </div> 
    </div> 
) 

} 

export default class makeModel extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     selectedMake: null 
    } 
} 

handleMake(event,name){ 
    event.preventDefault(); 

    const nextMake = this.state.selectedMake !== name ? name : null; 

    this.setState({selectedMake: nextMake}); 
} 

render() { 
    const {selectedMake} = this.state; 
    return (
     <div> 
      {data.map((car, i) => { 
       return (
        <ModelLink key={i} 
          models={car.models} 
          make={car.make} 
          isDisplay={car.make === selectedMake} 
          handleMake={(e) => this.handleMake(e,car.make)} 
        /> 
       ) 
      })} 
     </div> 
    ); 
} 
}

來源

2016-09-05 17:03:48

顯示隱藏內容點擊反應JS

回答

相關問題