コンテンツを表示するにはクリックしてください反応するJS

Question

AはReact 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には、クラスモデルを持つ3つのdivがすべて表示されています。しかし、クリックしたモデルでのみモデルが表示されます。どのようにクラスのモデルとそれらのdivのすべてを非表示にしてクリックしたものだけを表示する？

一般的に、それを行うには良い方法がありますか？

Answer 1

これを試してみてください：

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