有反应的聚焦div元素
是否可以使用focus()方法来聚焦div (或任何其他元素)？
我已经将tabIndex设置为div元素：
<div ref="dropdown" tabIndex="1"></div>当我点击它的时候，我可以看到它变得很集中，但是，我试图动态地聚焦这个元素，比如：
setActive(state) {
ReactDOM.findDOMNode(this.refs.dropdown).focus();
}或者像这样：
this.refs.dropdown.focus();但是，当事件被触发时，组件无法获得焦点。我该怎么做？是否还有其他(不是输入)元素可以用于此？
编辑：
嗯，看来这实际上是有可能的：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>
);
}
}回答 4
Stack Overflow用户
发布于 2016-08-26 23:14:27
每次设置状态时，都会重新绘制组件，这意味着组件失去了焦点。在这种情况下，如果您想要将元素集中在一个支柱或状态元素上，那么使用componentDidUpdate或componentDidMount方法是很方便的。
请记住，根据React生命周期文档，只有在首次在屏幕上呈现组件之后才会发生componentDidMount，并且在此调用中不会发生componentDidUpdate，然后对于每个新的setState、forceUpdate调用或接收新道具的组件都会发生componentDidUpdate调用。
componentDidMount() {
this.focusDiv();
},
componentDidUpdate() {
if(this.state.active)
this.focusDiv();
},
focusDiv() {
ReactDOM.findDOMNode(this.refs.theDiv).focus();
}这是一个你可以玩的JS小提琴。
Stack Overflow用户
发布于 2016-08-26 23:01:00
这就是问题所在：
this.setState({ active: state });
this.refs.component.focus();Set状态正在重新启用您的组件，并且调用是异步的，所以您正在聚焦，它只是在它聚焦之后立即重命名，然后您就失去了焦点。尝试使用setState回调
this.setState({ active: state }, () => {
this.refs.component.focus();
});Stack Overflow用户
发布于 2019-06-18 14:03:37
回答有点晚，但您的事件处理程序不起作用的原因可能是因为您没有绑定您的函数，因此当您将其传递为例如：“this.selectItem(颜色)”时，函数中使用的‘这个’将没有定义。
在构造函数中做：
this.selectItem = this.selectItem.bind(this)
this.setActive = this.setActive.bind(this)https://stackoverflow.com/questions/39174887
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号