在點擊其中的一個選項後切換菜單

Question

目前我有一個下拉菜單，我正在使用它來允許用戶選擇一個區域。一旦他們點擊下拉菜單中的選項，我會更新下拉菜單以反映他們選擇的區域。當點擊菜單選項時，我也希望下拉菜單切換，以便下拉選項不再顯示，因爲用戶選擇了一個選項。

我該怎麼做呢？含

組件的下拉菜單

function RegionSelector (props) { 
    var regions = [ 
     { 
      name:'Santa Cruz', 
      id: '2958', 
      spots: 
      [ 
       {name:'Steamer Lane', id:'4188'}, 
       {name:'Four Mile', id:'5023'}, 
       {name:'Waddell Creek', id:'5021'}, 
       {name: 'Mitchell\'s Cove', id:'5028'}, 
       {name: '26th Ave', id:'5030'} 
      ] 
     }, 
     { 
      name:'Los Angeles', 
      id: '1234', 
      spots: 
      [ 
       {name:'Newport', id:'1241'}, 
       {name:'HB', id:'3421'}, 
      ] 
     } 
    ] 

    return (
     <div className="content col-xs-3 col-md-3"> 
      <div className="admin-panel"> 
       <label htmlFor="toggle" className="admin-text"> 
        { props.selectedRegion === null ? 'Select Your Region' : props.selectedRegion.name} 
       </label> 
      </div> 

      <input type="checkbox" id="toggle"/> 
      <label className="cog octicon octicon-gear" htmlFor="toggle"></label> 
      <div className="menu"> 
       <div className="arrow"></div> 
        {regions.map((region) => { 
         return (
          <a href="#" key={region.name} onClick={props.onSelect.bind(null, region)}> 
           {region.name} 
           <span className="icon octicon octicon-person"></span> 
          </a> 
         ) 
        })} 
      </div> 
     </div> 
    ) 
} 

CSS的下拉菜單：

.content 
{ 
    position: relative; 
    top: 5px; 
    width: 250px; 
    margin: 0 auto; 
    padding-bottom: 50px; 
    z-index: 1; 
} 

.admin-panel 
{ 
    background: #F8F8F8; 
    width: 240px; 
    height: 40px; 
    color: #888888; 
    border: none; 
    border-radius: 3px; 
    padding: 0 0 0 10px; 
    font: bold 13px Helvetica, sans-serif; 
    text-transform: uppercase; 
    line-height: 41px; 
    cursor: default; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
    margin-bottom: 7px; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
} 

.cog 
{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    padding: 5px; 
    margin-top: 5px; 
    margin-right: 6px; 
    border: none; 
    color: #888888; 
    font-size: 20px; 
} 

.admin-text:hover, .cog:hover { cursor: pointer; color: #555555; } 

input#toggle { display: none; } 
input#toggle ~ .menu { display: block; } 
input#toggle:checked ~ .menu { display: none; } 

.menu a 
{ 
    display: block; 
    background: #F8F8F8; 
    width: 240px; 
    height: 40px; 
    padding: 0 0 0 10px; 
    font: bold 13px Helvetica, sans-serif; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: #000000; 
    color: rgba(0, 0, 0, 0.4); 
    line-height: 40px; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
} 

.menu a:nth-child(2) 
{ 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
} 

.menu a:last-child 
{ 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
} 

.menu a:hover { color: #555555; } 

.menu a:hover > .octicon { color: #555555; } 

.icon 
{ 
    float: right; 
    margin-top: 10px; 
    font-size: 20px; 
    color: #000000; 
    color: rgba(0, 0, 0, 0.4); 
    opacity: 0.8; 
} 

.octicon-person { margin-right: 16px; } 
.octicon-graph { margin-right: 11px; } 
.octicon-cloud-upload { margin-right: 11px; } 
.octicon-pencil { margin-right: 13px; } 

.arrow 
{ 
    width: 0; 
    height: 0; 
    margin-left: 15px; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-bottom: 9px solid #F8F8F8; 
} 

Answer 1

我看到你使用返回JSX的功能，但它看起來像你可能想使用這裏是一個有狀態的組件。 然後確保regions數組是組件狀態的一部分。你可以這樣做：

class RegionSelector extends React.Component { 
constructor() { 
    setState({regions : [...]}) 
} 
    .... 

現在在你的onSelect功能，只需手動清除區域狀態。

function (onSelect) { 
    this.setState({regions: []}) 
... 
} 

這將導致反應更新組件，再次使用空白區域數組調用渲染函數。

如果你想用一個無狀態的組件來實現這一點，您regions數組必須是被實例化您的下拉父組件的狀態的一部分，你必須做同樣的事情在onSelect清除regions。