1

在使用 cleave 和 typescript 时，我在 onChange 事件中遇到上述错误。Ts 抛出错误，指出它在 event.target 中没有“rawValue”。我的代码如下：

import React, { useCallback, useState, useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import { StyledCleaveInput } from './style';
import { getCleaveOptions } from './helper';

interface Props {
  error?: string;
  id?: string;
  value?: string;
  onChange?: (arg: any) => any;
  disabled?: boolean;
  placeholder?: string;
  deviceType?: string;
  additional?: object;
}

const FormattedNumberInput: React.FC<Props> = (props): JSX.Element => {
  const { id, placeholder, onChange, error, disabled, deviceType, value } = props;

  type cleaveState = {
    setRawValue: (arg: any) => any
  };

  const [cleave, setCleave] = useState<cleaveState | null>(null);

  const options = useMemo(() => getCleaveOptions(props), []);

  const handleChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      if(onChange){
        onChange(event.target.rawValue);
      }
    },
    [onChange]
  );

  useEffect(() => {
    if (cleave && value) cleave.setRawValue(value);
  }, [cleave, value]);

  return (
    <StyledCleaveInput
      data-id={id}
      placeholder={placeholder}
      isError={error}
      disabled={disabled}
      deviceType={deviceType}
      onChange={handleChange}
      options={options}
      onInit={setCleave}
    />
  );
};

FormattedNumberInput.propTypes = {
  error: PropTypes.string,
  id: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func,
  disabled: PropTypes.bool,
  placeholder: PropTypes.string,
  deviceType: PropTypes.string,
  additional: PropTypes.object,
};

export default FormattedNumberInput;

错误在于：上面导入的handleChange StyledCleaveInput 的event.target.rawValue 使用'cleave.js' 输入，因此我们可以在输入的onChange 中使用事件对象内的event.target.rawValue。也安装了@@types/cleave，但错误仍然存​​在。

提前感谢您的帮助

4

3 回答 3

2

您似乎正在使用Cleave.js库。在这种情况下，对于handleChange事件处理程序方法，您不应将其HTMLInputElement用作ChangeEvent. 相反，您可能需要使用Cleave（或任何等价物，因为我对这个库不太熟悉）作为类型参数。

const handleChange = useCallback(
  (event: React.ChangeEvent<Cleave>) => {
    if(onChange){
      onChange(event.target.rawValue);
    }
  },
  [onChange]
);
于 2020-05-29T10:13:46.723 回答
1

如果您不想使用接口，也可以使用Intersection Types来扩展 HTMLInputElement 类型，如下所示：

const handleChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement & { rawValue: string }>) => {
      if(onChange){
        onChange(event.target.rawValue);
      }
    },
    [onChange]
  );
于 2022-01-19T15:02:22.140 回答
1

经过大量研究后，我得到了实现我自己的 ChangeEvent 的答案，如下所示：

interface ChangeEvent<T> extends React.ChangeEvent<T> {
  target: { rawValue: string } & EventTarget & T;
}

然后像这样使用它：

const handleChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      if(onChange){
        onChange(event.target.rawValue);
      }
    },
    [onChange]
  );
于 2020-06-05T10:37:02.063 回答