Question

我目前有一个输入框组件，我想添加一个脚本来阻止除数字以外的所有输入。

function onChangeHandler(e: React.ChangeEvent) {
  this.value.replace(/(?![0-9])./gmi,'');
}

export function Input(props: InputProps) {
  const {
    className,
    ...restProps
  } = props;

  return (
    <input
      {...restProps}
      className={cx([inputStyles])}
      type={inputType}
      onChange={e => onChangeHandler(e)}
    />
  );
}

当前此设置无效，因为我从onChangeHandler中收到以下错误：'this' implicitly has type 'any' because it does not have a type annotation.

我该如何做？

注意：我不想使用type=number

Answer 1

您正在尝试访问不存在的该范围。这不是一个类，而是一个函数，这里不需要this。

您的代码应如下所示（不过，您可以将value状态移到父组件并通过props传递）：

export function Input(props: InputProps) {
  const [value, setValue] = React.useState('');  

  const {
    className,
    ...restProps
  } = props;

  const onChangeHandler = (e: React.ChangeEvent) => {
    setValue(e.target.value.replace(/(?![0-9])./gmi,''));
  }

  return (
    <input
      {...restProps}
      className={cx([inputStyles])}
      type={inputType}
      value={value}
      onChange={onChangeHandler}
    />
  );
}

将onChange脚本添加到React

1 个答案: