Можно ли сфокусировать div (или любые другие элементы) с помощью метода focus()
?
Я установил tabIndex в элемент div:
<div ref="dropdown" tabIndex="1"></div>
И я вижу, что он фокусируется, когда я нажимаю на него, однако я пытаюсь динамически сфокусировать элемент следующим образом:
setActive(state) {
ReactDOM.findDOMNode(this.refs.dropdown).focus();
}
Или вот так:
this.refs.dropdown.focus();
Но компонент не получает фокус при срабатывании события. Как я могу это сделать? Есть ли какой-нибудь другой (не входной) элемент, который я могу использовать для этого?
EDIT:
Ну, похоже, это действительно можно сделать: 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>
);
}
}