onBlur 后输入不可访问答案

【问题标题】：After onBlur the input is not accessibleonBlur 后输入不可访问
【发布时间】：2022-02-10 16:15:52
【问题描述】：

我正在使用 onBlur 来更改错误的状态，以验证输入组件中的值。但是当用户点击离开输入时，需要几秒钟才能点击回输入以更改值。

谁能知道为什么会这样？另一个问题，我怎样才能改变从 onBlur 返回的事件的类型而不是“任何”？

Form.tsx

  const [errorFlag, setErrorFlag] = useState(false);
  const [plz, setPLZ] = useState<string | undefined>(undefined);

  const onBlur = (e:any) => {
    setErrorFlag(e.target.checkValidity());
    };
      return (<Fragment>
          ...
          <Input 
            onChange={setPLZ}
            name="PLZ" 
            pattern="^[0-9]{5}$"
            errorMessage="* Invalid Postal Code"
            error={plz === ''} 
            required={true}
            onBlur={onBlur}  
            style={{ flexGrow: 0, width: '100px', marginRight: '20px' }}
          />
        </Fragment>)

FormInput.tsx

export interface InputProps {
  ...
  onChange?: (value: string) => void;
  onBlur?:(event: React.ChangeEvent<HTMLInputElement>) => void;
}

export class Input extends React.Component<InputProps, {
  value: string;
}> {

  constructor(props: InputProps) {
    super(props);
    this.state = { value: '' };
  }

  private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ value: event.target.value });
    this.props.onChange?.(event.target.value);
   
  }
  private onBlur = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.props.onBlur?.(event);
 }
  
  render() {

    return (
      <div key="form-name" className="formrow" style={{...this.props.style}}>
        <input 
          ... 
          onChange={this.onChange} 
          onBlur={this.onBlur}
          />
        <span id="formInput-errorspan" className="errorSpan">{this.props.errorMessage}</span>
      </div>
    );
  }
}

【问题讨论】：

标签： javascript html reactjs typescript

【解决方案1】：

我不知道你的第一个问题，但你可以使用

<React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined>

作为 onBlur 事件的类型

【讨论】：