2017-12-27 285 views
0

我試圖從JSON中加載項目,並在點擊時使用描述切換下拉div。雖然我可以在靜態div上按順序顯示元素(例如:loc1 & desc1, loc2 & desc2),但在第二部分(desc)隱藏時只能在點擊loc loc時顯示如何正確渲染它。ReactJS:如何按順序映射JSON元素並在點擊時顯示隱藏的div

什麼是映射結果的最佳方式,因此它不顯示爲loc1 & loc2, desc1 & desc2而是loc1 & desc1, loc2 & desc2

代碼:

var places = { 
    library: { 
    location: [ 
     { 
     loc_name: "library1", 
     "desc": "desc1 : Modern and spacious building" 
     }, 
     { 
     loc_name: "library2", 
     "desc": "desc2 : A cosy small building" 
     } 
    ] 
    } 
}; 



function contentClass(isShow) { 
    if (isShow) { 
    return "content"; 
    } 
    return "content invisible"; 
} 

class Toggle extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { isShow: false }; 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState(function (prevState) { 
     return { isShow: !prevState.isShow }; 
    }); 
    } 

    render() { 

    const libraries_desc = places.library.location.map((libr) => 
     <div> 
     <p>{libr.desc}</p> 
     </div> 
    ); 
    const lib_names = places.library.location.map((libr) => 
     <div> 
     <p>{libr.loc_name}</p> 
     </div> 
    ); 

    return (
     <div> 
     <div className='control' onClick={this.handleClick}> 
      <h4>{lib_names}</h4> 
      <div className={contentClass(this.state.isShow)}>{libraries_desc}</div> 
     </div> 
     </div> 
    ); 
    } 
} 



render((
    <Toggle /> 
), document.getElementById('root')); 

當前的結果:

library1 
library2 
desc1 : Modern and spacious building 
desc 2 : A cosy small building 

所需的結果:

library1 
desc1 : Modern and spacious building (hidden but shown when clicked) 

library2 
desc 2 : A cosy small building (hidden but shown when clicked) 

Codesandbox

回答

1

我可能會嘗試將位置提取到單獨的組件中。通過提取它,每個位置負責瞭解其狀態。在你的情況下,這意味着它的可見性(由this.state.isShow控制)。

這裏是你如何能做到這一點:

import React from 'react'; 
import { render } from 'react-dom'; 

var places = { 
    library: { 
    location: [ 
     { 
     loc_name: "library1", 
     "desc": "Modern and spacious building" 
     }, 
     { 
     loc_name: "library2", 
     "desc": "A cosy small building" 
     } 
    ] 
    } 
}; 

class Location extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { isShow: false }; 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState(function (prevState) { 
     return { isShow: !prevState.isShow }; 
    }); 
    } 

    contentClass(isShow) { 
    if (isShow) { 
     return "content"; 
    } 
    return "content invisible"; 
    } 

    render() { 
    return (
     <div className='control' onClick={this.handleClick}> 
     <h4>{this.props.desc}</h4> 
     <div className={this.contentClass(this.state.isShow)}>{this.props.loc_name}</div> 
     </div> 
    ) 
    } 
} 

class Toggle extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    const locations = places.library.location.map(location => { 
     return <Location {...location} /> 
    }) 

    return (
     <div> 
     {locations} 
     </div> 
    ); 
    } 
} 



render((
    <Toggle /> 
), document.getElementById('root')); 
1

Toggle組件應b像這樣。

class Toggle extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     isShow: false, 
     id: -1, // initial value 
    }; 
    } 

    handleClick = (id) => { 
    this.setState({ 
     isShow: !this.state.isShow, 
     id: id 
    }); 
    } 

    render() { 
    const { location } = places.library; 
    const { isShow, id } = this.state; 
    return (
     <div className="control"> 
      {location.map((libr, index) => (
      <div key={index} onClick={() => { this.handleClick(index) }}> 
       <p>{libr.loc_name}</p> 
       {(isShow && (id === index)) && <p>{libr.desc}</p>} 
      </div> 
      ))} 
     </div> 
    ); 
    } 
} 

所以,當你點擊div元素。點擊事件將被觸發,稱爲​​,它將傳遞index作爲該函數的參數。這會將isShow設置爲false或truth,反之亦然,以及要顯示的當前元素將通過this.state.id進行選擇。所以每次isShow爲真,this.state.id匹配index數組的元素。您的描述將顯示,否則它會隱藏,只要你想。

所以你想要的結果會是這樣的。

library1 
desc1 : Modern and spacious building (hidden but shown when clicked) 

library2 
desc 2 : A cosy small building (hidden but shown when clicked) 
+0

它顯示一個語法錯誤,在關閉location.map((溴化鋰,指數)的標籤,即使它正常關閉,之所以會如此 – Amma

+0

它?我錯誤地修改了它,請看代碼中的代碼再次提交methid –

+1

就是這樣 - 現在工作了,謝謝! – Amma

相關問題