इनपुट के साथ प्रतिक्रिया-बूटस्ट्रैप ड्रापडाउन खुला नहीं रहेगा

Question

मैं अंदर एक Input साथ React-Bootstrap DropDown उपयोग कर रहा हूँ MenuItem एक (अन्यथा सांत्वना मुझे पर चिल्लाता Uncaught TypeError: गुण अपरिभाषित की 'फोकस' पढ़ा नहीं जा सकता)

ठीक है इसलिए ड्रॉप डाउन रेंडर करता है, और इनपुट मेनू आइटम के अंदर होता है (सभी ठीक है) को छोड़कर जब मैं इनपुट के अंदर क्लिक करता हूं, ड्रॉपडाउन बंद हो जाता है।

यहाँ, मेरी 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> 

सही दिशा में किसी भी इशारा बहुत सराहना की है मैं इस पूरे दिन हल करने की कोशिश की है।

धन्यवाद।

Answer 1

पूरे दिन ... यह वही है जो मैं आया था।

मुझे उम्मीद है कि एक बेहतर तरीका है।

<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

यह क्षमता प्रतिक्रिया-बूटस्ट्रैप के लिए अपेक्षाकृत नई सुविधा है। नए ड्रॉपडाउन अनुकूलन दस्तावेज़ों को चेकआउट करें: http://react-bootstrap.github.io/components.html#btn-dropdowns-custom उस अनुभाग के अंतिम उदाहरण में इनपुट के साथ एक ड्रॉपडाउन शामिल है। ड्रॉपडाउन ट्रिगर वहां एक लिंक की तरह दिखता है, लेकिन आप इसे भी अनुकूलित कर सकते हैं।

Answer 3

मैं इसे ड्रॉपडाउन के लिए टॉगल पर एक कस्टम होने के द्वारा काम करने में कामयाब रहा, जो इनपुट तत्व से क्लिक होने पर कुछ भी नहीं करता है। मैं मूल रूप से कुछ इस तरह के साथ समाप्त हो गया:

तो कुछ इस तरह:

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

}); 

आशा इस रूप में अच्छी तरह से आप के लिए काम करता है।

Answer 4

ऐसा लगता है कि यह मेरे लिए काम कर रहा है।

<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

मुझे इस मुद्दे का समाधान मिला जो मेरे लिए बहुत अच्छा काम करता था। ड्रॉपडाउन मेनू के अंदर मेरे पास एक मेनू इनपुट के अंदर एक टेक्स्ट इनपुट था ()।

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