onBlur 事件适用于 chrome 但不适用于 safari？

Question

我遇到了关于使用 react-typescript 的 onBlur 事件的问题。 为了重现问题，我点击 upButton 使夜晚达到 9+，这是最大值，如果用户继续点击 upButton，它将在输入上方出现错误。

图片如下： 这是我的代码库：

class MvSpinner extends React.Component<Props, MvSpinnerState> {
  constructor(props:Props) {
    super(props);
    this.upButton = this.upButton.bind(this);
    this.downButton = this.downButton.bind(this);
    this.clear = this.clear.bind(this);
    this.drawResult = this.drawResult.bind(this);
    this.state = {
      text: "",
      open: false,
      showSoftError: false,
      showHardError: false,
    };
  }

  upButton() {
    let currentValue = this.props.value;
    if (currentValue === this.props.max) {
      this.setState({ showSoftError: true, showHardError: true });
    }

    if (currentValue < this.props.max && !this.props.disabled) {
      currentValue++;
      this.drawResult();
      this.onChange(currentValue);
    }

  }

  downButton() {
    let currentValue = this.props.value;
    if (currentValue > this.props.min && !this.props.disabled) {
      currentValue--;
      this.drawResult();
      this.onChange(currentValue);
    }
  }

  clear() {
    this.setState({
      open: true
    });
  }

  drawResult() {
    this.setState({
      open: false,
      showSoftError: false,
      showHardError: false,
    });
  }

    return (
         ...
        <label className="visuallyhidden" htmlFor={this.props.name}>{this.props.label}</label>
        {content}
        <div className="spinner-controls">
          <button
            tabIndex={-1}
            aria-label="increment"
            className="spinner-control-up"
            type="button"
            onBlur={this.drawResult}
            onClick={this.upButton}
          />
          <button
            tabIndex={-1}
            aria-label="decrement"
            className="spinner-control-down"
            type="button"
            onClick={this.downButton}
          />
        </div>
        <div className="error tool-tip">
          <div
            className={"tool-tip-popup " + (err ? "show" : "")}
            style={this.props.errorStyle}
          >
            <p>{err}</p>
          </div>
        </div>
     ...
);

当我在 upButton 之外单击时，它会显示错误工具提示，但是当我切换到 safari 时它不起作用。有谁知道如何解决这个错误？？？

谢谢！！！！

Answer 1

Why blur and focus doesn't work on Safari? - 先尝试最简单的搜索。

并且不再使用类组件。