Bölme elemanlarını React

Question

ile odaklama focus() yöntemini kullanarak div (veya başka öğeleri) odaklamak mümkün mü?

Bir div öğesi için bir tabIndex belirledik:

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

Ve bunun tıkladığımda Ben ancak, dinamik böyle elemanı odaklanmaya çalışıyorum, bu odaklanmış olur görebilirsiniz:

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

Ya da böyle :

this.refs.dropdown.focus(); 

Ama odağı almaz bileşen olay tri olduğunda ggered. Bunu nasıl yapabilirim? Bunun için kullanabileceğim başka (giriş değil) eleman var mı?

DÜZENLEME:

Eh, bunu yapmak gerçekten mümkün görünüyor: https://jsfiddle.net/69z2wepo/54201/

Ama bu benim tam kod benim için çalışıyor değildir:

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

Tepki setState geri arama kullanmayı deneyin bileşen odağı kaybettiğinde, yani bileşenine sen devlet ayarlamak her zaman yeniden çizer. Bu tür durumlarda, elemanı bir prop veya state öğesine dayalı olarak odaklamak istiyorsanız, componentDidUpdate veya componentDidMount yöntemlerini kullanmak uygundur.

uyarınca, componentDidMount sadece ekranda ilk kez bileşeni render sonra gerçekleştirilecek ve bu görüşmede componentDidUpdate her yeni setState, forceUpdate arama veya bileşen için daha sonra gerçekleşmeyecek Ömrü belgelerine Tepki unutmayın Yeni sahne almak için componentDidUpdate araması gerçekleşecektir.

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

Burada oynayabileceğiniz bir JS fiddle.

Answer 2

budur Sorun:

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

Ayarlanan durum bileşeninizi yeniden oluşturuyor ve Arama eşzamansızdır, bu nedenle , odaklamadır, odaklandıktan hemen sonra yeniden yürütülür.

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

Answer 3

Bu benim durumumda

render: function(){ 

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

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