html - reactjs-有2个字段的下拉列表选择

我正在尝试编写一个具有2个字段的选择组件，类似于http://www.apartments.com的内容。我研究了antd，bootstrap，语义等，但是没有看到类似的组件，因此我想知道是否有人知道软件包/库来完成此任务。还是我最好的选择是将其编码为带有2个选项卡的下拉列表，每个选项卡都作为输入字段？

最佳答案

不确定这是否在寻找什么，但是您可以像这样构建自己的自定义选择组件：

class Select extends React.Component {

  state = {
    activeMenu: 'min',
    open: true,
    min: '',
    max: ''
  };

  toggleMenu = e => {
    this.setState({
      activeMenu: e.target.name
    });
  };

  toggleOpen = () => {
    this.setState( prevState => {
      return { open: !prevState.open }
    });
  };

  getMenuOptions = () => {
    let options = [];
    switch(this.state.activeMenu){
      case 'min': {
        options = ['$1000','$2000','$3000','$4000','No Min'];
        break;
      }
      case 'max': {
        options = ['$1000','$2000','$3000','$4000','No Max'];
        break;
      }
    }
    return options.map( (option, i) => {
      return (
        <li key={i} onClick={this.handleSelect.bind(this, this.state.activeMenu, option)}>
          {option}
        </li>
      )
    });
  };

  handleSelect = (menu, value) => {
    this.setState({
      [menu]: value
    });
  };

  render() {
    const { open, min, max, activeMenu } = this.state;
    const menuOptions = this.getMenuOptions();
    return(
      <div className="select">
        <span onClick={this.toggleOpen} >Rent Range</span>
        {open && (
          <div>
            <div>
              <input type="text" name="min" value={min} onFocus={this.toggleMenu} autoFocus />
              -
              <input type="text" name="max" value={max} onFocus={this.toggleMenu} />
            </div>
            <div>
              <ul className={activeMenu}>
                {menuOptions}
              </ul>
            </div>
          </div>
        )}
      </div>
    )
  }
}

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

span {
  display: block;
  cursor: pointer;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 5px;
}
li:hover {
  cursor: pointer;
}
ul.max {
  float: right;
}
.select {
  width: 300px;
  border: 1px solid #222;
  overflow: hidden;
}

<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="root"></div>

关于html - reactjs-有2个字段的下拉列表选择，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49560671/