React-Bootstrap rozwijanej z wejściem nie pozostanie otwarte

Question

Używam React-Bootstrap DropDown z Input Wewnątrz MenuItem (inaczej konsola krzyczy na mnie Uncaught TypeError: nie można odczytać własności „ostrość” undefined)

Ok więc rozwijane renderowanie, a dane wejściowe znajdują się wewnątrz elementu menu (wszystko jest w porządku), z wyjątkiem po kliknięciu wewnątrz wejścia, rozwijanie zamyka się.

Oto moja 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> 

Wszelkie wskazując we właściwym kierunku jest bardzo cenione, I zostały próbuje rozwiązać ten problem przez cały dzień.

Dziękuję.

Answer 1

Po całym dniu ... to właśnie wymyśliłem.

Mam nadzieję, że jest lepszy sposób.

<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(); 
}, 

Answer 2

Ta funkcja jest stosunkowo nową funkcją React-Bootstrap. Zamów nowsze dokumenty dostosowywania Dropdown: http://react-bootstrap.github.io/components.html#btn-dropdowns-custom Ostatni przykład tej sekcji zawiera listę rozwijaną z danymi wejściowymi. Spust rozwijany wygląda jak link, ale możesz go również dostosować.

Answer 3

Udało mi się sprawić, by działało, mając niestandardowe okno dialogowe Włączanie, które nie robi nic, jeśli kliknięcie pochodzi z elementu wejściowego. I w zasadzie skończyło się coś takiego:

więc coś takiego:

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> 
    ); 
    } 

}); 

nadzieję, że to działa dla Ciebie.

Answer 4

Wydaje się, że to działa dla mnie.

<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> 

Answer 5

Znalazłem rozwiązanie tego problemu, które sprawdziło się całkiem dobrze. Wewnątrz rozwijanego menu miałem wejście tekstowe (nie wewnątrz MenuItem).

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