Question

我有一个数字输入字段，我在接收到条形码扫描器的输入后试图关注它。 实际上，扫描仪只是一个伪键盘，我看着Tab键被按下。

在Edge中，输入会按预期获得焦点，但在所有其他测试的浏览器（Chrome / Firefox）中，输入无法获得焦点。自从我在PC上以来，Safari就不再是睾丸。

// I'm using a lifecycle method to watch for a change to the components props. 
// The onInputFocused will unset the value, but I've disabled to this 
// to eliminate any possible race cases?!

componentDidUpdate() {
    if (this.props.detail.shouldFocus) {
        setTimeout(() => {
            this.qtyInput.focus();
        }, 250);
        //     this.props.onInputFocused(this.props.detail);
    }
}
render(){
    return (
        ...
        <input type="number" className="form-control" min="0" name="qty_received" value={detail.ReceiptQuantityReceived}
                        ref={(input) => { this.qtyInput = input }}
                        onChange={(e) => { onQtyReceivedChange(e, detail) }}
                        onBlur={() => { onReceiveShipmentRowBlur(detail) }} />
    );
}

我最初在没有focus的情况下拨打setTimeout，但是根据网上的一些建议尝试了超时。我还尝试将输入更改为text，但这也没有任何效果。

在console.log上执行this.qtyInput会输出预期的元素。

我能想到的唯一另一件事就是用户扫描的模式通过类似的功能获得它的焦点，但是在焦点调用应该发生时它已被移除。

为了增加奇怪性，我在输入的console.log事件中添加了onBlue，即使您无法输入，也会被解雇田野或有任何焦点的视觉指示。

Answer 1

您必须尝试的一件事是为INPUT元素添加此属性（输入autoFocus ..）这个属性可以帮到你

ReactJS元素焦点（）没有触发

1 个答案: