प्रतिक्रिया

Question

के साथ div तत्वों पर ध्यान केंद्रित करना focus() विधि का उपयोग कर div (या कोई अन्य तत्व) पर ध्यान केंद्रित करना संभव है?

मैं एक div तत्व के लिए एक tabindex निर्धारित किया है:

<div ref="dropdown" tabIndex="1"></div> 

और मैं देख सकता हूँ यह ध्यान केंद्रित हो जाता है जब मैं उस पर क्लिक करें, फिर भी, मैं गतिशील तत्व जैसे ध्यान केंद्रित करने की कोशिश कर रहा हूँ:

setActive(state) { 
    ReactDOM.findDOMNode(this.refs.dropdown).focus(); 
} 

या इस तरह:

this.refs.dropdown.focus(); 

लेकिन घटक फोकस नहीं मिलता है जब घटना त्रि है ggered। मैं यह कैसे कर सकता हूँ? क्या कोई अन्य (इनपुट नहीं) तत्व है जिसके लिए मैं इसका उपयोग कर सकता हूं?

संपादित करें:

ठीक है, यह इस यह वास्तव में संभव है करने के लिए: https://jsfiddle.net/69z2wepo/54201/

लेकिन यह नहीं मेरे लिए काम कर, यह मेरा पूरा कोड है:

class ColorPicker extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     active: false, 
     value: "" 
    }; 
    } 

    selectItem(color) { 
    this.setState({ value: color, active: false }); 
    } 

    setActive(state) { 
    this.setState({ active: state }); 
    this.refs.dropdown.focus(); 
    } 

    render() { 
    const { colors, styles, inputName } = this.props; 

    const pickerClasses = classNames('colorpicker-dropdown', { 'active': this.state.active }); 

    const colorFields = colors.map((color, index) => { 
     const colorClasses = classNames('colorpicker-item', [`colorpicker-item-${color}`]); 

     return (
     <div onClick={() => { this.selectItem(color) }} key={index} className="colorpicker-item-container"> 
      <div className={colorClasses}></div> 
     </div> 
    ); 
    }); 

    return (
     <div className="colorpicker"> 
     <input type="text" className={styles} name={inputName} ref="component" value={this.state.value} onFocus={() => { this.setActive(true) }} /> 
     <div onBlur={() => this.setActive(false) } onFocus={() => console.log('focus')} tabIndex="1" ref="dropdown" className={pickerClasses}> 
      {colorFields} 
     </div> 
     </div> 
    ); 
    } 
} 

Answer 1

प्रतिक्रिया उपयोग करने का प्रयास घटक आप राज्य की स्थापना की हर बार redraws, जिसका अर्थ है कि घटक ध्यान केंद्रित खो देता है। इस तरह के उदाहरणों में componentDidUpdate या componentDidMount विधियों का उपयोग करना सुविधाजनक है यदि आप प्रोप, या राज्य तत्व के आधार पर तत्व को फ़ोकस करना चाहते हैं।

ध्यान रखें कि प्रति के रूप में प्रतिक्रिया जीवनचक्र प्रलेखन, componentDidMount केवल स्क्रीन पर पहली बार के लिए घटक प्रतिपादन के बाद क्या होगा, और इस कॉल में componentDidUpdate घटित नहीं होगा, तो प्रत्येक नए setState, forceUpdate कॉल या घटक के लिए नए प्रोप componentDidUpdate कॉल प्राप्त होगा।

componentDidMount() { 
    this.focusDiv(); 
}, 
componentDidUpdate() { 
    if(this.state.active) 
    this.focusDiv(); 
}, 
focusDiv() { 
    ReactDOM.findDOMNode(this.refs.theDiv).focus(); 
} 

यहां एक JS fiddle है जिसके साथ आप खेल सकते हैं।

Answer 2

यह वह जगह है समस्या:

this.setState({ active: state }); 
this.refs.component.focus(); 

सेट स्थिति आपके घटक को फिर से प्रस्तुत कर रही है और कॉल एसिंक्रोनस है, इसलिए आप फ़ोकस कर रहे हैं, यह फ़ोकस करने के बाद तुरंत पुनः प्रस्तुत हो रहा है और आप फोकस खो देते हैं। setState कॉलबैक

this.setState({ active: state },() => { 
    this.refs.component.focus(); 
}); 

Answer 3

यह मेरे मामले

render: function(){ 

    if(this.props.edit){ 
    setTimeout(()=>{ this.divElement.focus() },0) 
    } 

    return <div ref={ divElement => this.divElement = divElement} 
       contentEditable={props.edit}/> 
}