在 React 中单击其中一个选项后切换菜单

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: []})
...
}

这将导致 react 更新组件，使用空区域数组再次调用渲染函数。

如果您想使用无状态组件实现此目的，您的 regions 数组必须是实例化下拉列表的父组件状态的一部分，并且您必须在 onSelect 中执行相同的操作以清除regions.