反应Semantic-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>