带有输入的 React-Bootstrap 下拉菜单不会保持打开状态答案

【问题标题】：React-Bootstrap Dropdown with Input won't stay open带有输入的 React-Bootstrap 下拉菜单不会保持打开状态
【发布时间】：2015-09-10 20:22:48
【问题描述】：

我在MenuItem 内使用React-Bootstrap DropDown 和Input（否则控制台会对我大喊未捕获的类型错误：无法读取未定义的属性“焦点”）

好的，所以下拉菜单呈现，并且输入在菜单项内（一切都很好），除了 当我在输入内单击时，下拉菜单关闭。

这是我的 JSX

<Bootstrap.DropdownButton title={this.state.callIdTitle} id="callId">
  <Bootstrap.MenuItem eventKey='1'>
   <input ref="callIdInput" type='text' eventKey='2' placeholder='Enter Call ID' />
  </Bootstrap.MenuItem>
</Bootstrap.DropdownButton>

非常感谢任何指向正确方向的人，我整天都在努力解决这个问题。

谢谢。

【问题讨论】：

标签： javascript jquery twitter-bootstrap reactjs react-bootstrap

【解决方案1】：

我设法通过为下拉菜单自定义 onToggle 来使其正常工作，如果点击来自输入元素，则该下拉菜单不会执行任何操作。我基本上得到了这样的结果：

所以是这样的：

var React = require('react');

var ReactBootstrap = require('react-bootstrap'),
    Dropdown = ReactBootstrap.Dropdown,
    DropdownToggle = Dropdown.Toggle,
    DropdownMenu = Dropdown.Menu,
    Input = ReactBootstrap.Input,
    MenuItem = ReactBootstrap.MenuItem;

module.exports = React.createClass({
  displayName: 'DropdownWithInput',

  setValue: function(e) {
    var value = e.target.value;

    this.setState({value: value});
  },

  onSelect: function(event, value) {
    this.setState({value: value});
  },

  inputWasClicked: function() {
    this._inputWasClicked = true;
  },

  onToggle: function(open) {
    if (this._inputWasClicked) {
      this._inputWasClicked = false;
      return;
    }
    this.setState({open: open});
  },

  render: function() {
    return (
        <Dropdown id={this.props.id} open={this.state.open} onToggle={this.onToggle}
                  className="btn-group-xs btn-group-default">
          <DropdownToggle bsStyle="default" bsSize="xs" className="dropdown-with-input dropdown-toggle">
            Dropdown with input
          </DropdownToggle>

          <DropdownMenu>
            <Input
                type="text"
                ref="inputElem"
                autoComplete="off"
                name={this.props.name}
                placeholder="Type something here"
                onSelect={this.inputWasClicked}
                onChange={this.setValue}
                />
            <MenuItem divider key={this.props.id + '-dropdown-input-divider'}/>
            <MenuItem eventKey={1} onSelect={this.onSelect}>One</MenuItem>
            <MenuItem eventKey={2} onSelect={this.onSelect}>Two</MenuItem>
            <MenuItem eventKey={3} onSelect={this.onSelect}>Three</MenuItem>
          </DropdownMenu>
        </Dropdown>
    );
  }

});

希望这也适用于您。

【讨论】：

【解决方案2】：

此功能是 React-Bootstrap 的一个相对较新的功能。查看更新的下拉自定义文档：http://react-bootstrap.github.io/components.html#btn-dropdowns-custom 该部分的最后一个示例包括带有输入的下拉列表。下拉触发器看起来像一个链接，但您也可以自定义它。

【讨论】：

【解决方案3】：

我找到了一个对我来说非常有效的解决方案。在下拉菜单中，我有一个文本输入（不是在 MenuItem 内）。

<input onSelect={e => e.stopPropagation()} ... />

【讨论】：

这是我的代码仍然无法工作<Dropdown id="myID"> <Dropdown.Toggle noCaret bsStyle="success" children={<i className="fas fa-ellipsis-h"></i>}/> <Dropdown.Menu> <input value="edit this text" type="text" name="notes" id="abc" onSelect={e => e.stopPropagation()} /> </Dropdown.Menu> </Dropdown>

【解决方案4】：

一整天之后……这就是我想出的。

希望有更好的办法。

    <Bootstrap.DropdownButton onClick={this.setFocusToCallIdInput} title={this.state.callIdTitle}>
      <Bootstrap.MenuItem href="javascript:void(0);" eventKey='1'>
        <Bootstrap.Input onClick={this.dontCloseMeBro} ref="callIdInput" type='text' onChange={this.callIdInputSelected} placeholder='Enter Call ID' />
      </Bootstrap.MenuItem>
    </Bootstrap.DropdownButton>



setFocusToCallIdInput:function(e){
    console.log("Call Id clicked");     
    React.findDOMNode(this.refs.callIdInput).focus();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
},
dontCloseMeBro:function(e){
    console.log("menu item clicked");       
    React.findDOMNode(this.refs.callIdInput).focus();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
},

【讨论】：

您正在尝试破解 MenuItem 未构建的功能，引导程序通常不支持此功能。您需要为输入创建一个自定义 MenuItem。

【解决方案5】：

这似乎对我有用。

<Dropdown id="my-dropdown">
  <Input 
    type="text"
    bsRole="toggle"
    value={this.state.inputValue}
    onChange={this.onChange} />
  <Dropdown.Menu>
    <MenuItem key={1}>Item 1</MenuItem>
    <MenuItem key={2}>Item 2</MenuItem>
    <MenuItem key={3}>Item 3</MenuItem>
  </Dropdown.Menu>
</Dropdown>

【讨论】：

【解决方案6】：

这是一个可重用功能组件的示例，除非您单击离开它，否则它将保持打开状态（即当您输入输入时它将保持打开状态）。如果您有一个带有复选框的下拉菜单等，这也很有用。

const StayOpenDropdown = ({ children, ...rest }) => {
    const [show, setShow] = useState(false)
    const onToggle = (isOpen, e, metadata) => {
        setShow(isOpen || metadata.source === 'select')
    }
    return (
        <DropdownButton show={show} onToggle={onToggle} {...rest}>
            {children}
        </DropdownButton>
    )
}

const MyComponent = () => (
    <StayOpenDropdown title='Some Title' >
        <input type='text' placeholder='Enter Call ID' />
    </StayOpenDropdown>
)

【讨论】：