Question

我有一个文本输入：

{this.state.showInput 
    && (<input
        type="number"
        min="0"
        max="5"
        onKeyPress={this.onPressKey}
        onChange={this.onChangeHandler}
        onBlur={e => this.revertValue(e)}
        defaultValue={this.props.initialMark}
        ref={this.inputRef}
    />)
}

默认情况下，showInput为假。通过单击按钮，我可以做到：

this.setState({ showInput: true }, () => {
    if (this.inputRef.current)
        this.inputRef.current.focus();
});

然后使用onBlur将showInput的值恢复为false：

revertValue(e) {
    e.target.value = this.props.initialMark;
    this.setState({ showInput: false });
}

问题是为什么在触发onFocus之后，我看到的模糊效果就被触发了，所以我的输入没有出现？如何避免这种行为？

这仅与Firefox相关。

Answer 1

此问题与firefox本身而非React中<input type="number">的奇怪行为（换句话说，错误）有关。在使用onBlur在新创建的元素上调用.focus()后，Firefox会立即触发type="number"。当然，您可以将type="number"替换为type="text"，但这不是解决问题的好方法。

根据情况（或偏好），有两种选择。

Click here to see demos.

异步。只需将this.inputRef.current.focus();包装到 setTimeout 中，就像这样setTimeout(() => this.inputRef.current.focus(), 100);。在创建输入之后100毫秒，该输入将变得集中。
或同步，我更喜欢。

在这种情况下，您需要处于组件状态的其他属性，例如initialized: false。

接下来，您需要在initialized处理程序中将onBlur设置为 true （或示例中的revertValue），此代码将起作用由于上面提到的奇怪行为，只在Firefox中使用。

if (!this.state.initialized) {
  return this.setState({
    initialized: true,
  });
}

最后一步，您需要在 .focus（）之后使用此代码为其他浏览器“重置”此属性。请注意，这是一个异步调用。

this.setState(() => ({
  initialized: true,
}));

在React中专注于Firefox后，文本输入模糊

1 个答案: