反应语义UI - 多选复选框下拉

Question

我想建立一个多选择复选框下拉与ES6 反应我的要求是，如下面的图像

我试着这样做规定click here但它不工作。

Answer 1

您可以使用一个将组件保留其状态和切换列表项的值的父组件。然后，您可以为每个列表项目创建组件，这些组件将使活动属性保持您可以点击切换的状态。

class ListItem extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {active: false} 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <a 
 
     onClick={() => { 
 
     this.setState(prevState => { 
 
      let newState = !prevState.active; 
 
      this.props.handleClick(newState, this.props.value); 
 
      return {active: newState} 
 
     }) 
 
     }} 
 
     className={!this.state.active ? '' : 'selected'} 
 
     href="#"> 
 
     {this.props.value}</a> 
 
    ) 
 
    } 
 
} 
 

 
class Select extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     showList: false, 
 
     value: [] 
 
    } 
 
    
 
    this.handleItemClick = this.handleItemClick.bind(this) 
 
    } 
 
    
 
    componentDidMount() { 
 
    document.addEventListener('mousedown', (e) => { 
 
     if(!this.node.contains(e.target)) { 
 
     this.setState({showList: false}) 
 
     } 
 
    }) 
 
    } 
 
    
 
    componentWillUnmount() { 
 
    document.removeEventListener('mousedown'); 
 
    } 
 
    
 
    renderValue() { 
 
    let {value} = this.state; 
 
    if(!value.length) return "Select..." 
 
    else return value.join(', ') 
 
    } 
 
    
 
    toggleList() { 
 
    this.setState(prevState => ({showList: !prevState.showList})) 
 
    } 
 
    
 
    handleItemClick(active, val) { 
 
    let {value} = this.state; 
 
    
 
    if(active) value = [...value, val] 
 
    else value = value.filter(e => e != val); 
 
    
 
    this.setState({value}) 
 
    } 
 
    
 
    
 
    render() { 
 
    return (
 
     <div 
 
     ref={node => this.node = node} 
 
     className="select"> 
 
     <button onClick={this.toggleList.bind(this)}> 
 
      <span className="select_value"> 
 
      {this.renderValue()} 
 
      </span> 
 
     </button> 
 
     
 
     <div 
 
     className={"select_list " + (!this.state.showList && 'hide')}> 
 
      <ListItem handleClick={this.handleItemClick} value="Lorem" /> 
 
      <ListItem handleClick={this.handleItemClick} value="Ipsum" /> 
 
      <ListItem handleClick={this.handleItemClick} value="Dolor" /> 
 
     </div> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Select />, 
 
    document.getElementById('container') 
 
);

button { 
 
    background: white; 
 
    width: 100%; 
 
    padding: 10px 15px; 
 
    border: 1px solid rgba(0, 0, 0, .1); 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    text-align: left; 
 
} 
 
.select_list { 
 
    width: 100%; 
 
    background: white; 
 
    border: 1px solid rgba(0, 0, 0, .1); 
 
    border-radius: 5px; 
 
} 
 

 
.select_list a { 
 
    padding: 10px 15px; 
 
    display: flex; 
 
    color: black; 
 
    text-decoration: none; 
 
    position: relative; 
 
    align-items: center; 
 
} 
 

 
.select_list a:before { 
 
    width: 15px; 
 
    height: 15px; 
 
    content: ''; 
 
    border: 1px solid rgba(0, 0, 0, .1); 
 
    border-radius: 5px; 
 
    margin-right: 10px; 
 
    display: block; 
 
} 
 

 
.select_list a.selected:before { 
 
    background: #0493D1; 
 
    content: '✓'; 
 
    color: white; 
 
    font-size: 11px; 
 
    text-align: center; 
 
    line-height: 15px; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>