我无法打印onChange的值

Question

import React from "react";
import InputMask from "react-input-mask";
import styles from "./inputMask.module.scss";
import { Controller, useFormState } from "react-hook-form";

const TimerInput = ({
  src,
  label,
  type,
  step,
  name,
  control,
  required,
  style,
  placeholder,
  showCurrencyMask,
  onChange
}) => {
  const state = useFormState({ control, name });
 

  return (
    <div>
      <Controller
        control={control}
        name={name}
        rules={{ required: required }}
        render={({ field }) => (
          <div className={styles.inputBox} style={style}>
            <label className={styles.title}>{label}</label>
            <div className={styles.inputMaskDiv}>
              <img className={styles.inputImg} src={src} />
              {showCurrencyMask ? (
                <InputMask
                  className={styles.inputMask}
                  type={type}
                  name={name}
                  step={step}
                  placeholder={placeholder}
                  mask="9.99 €"
                  maskChar="0"
                  alwaysShowMask
                  onChange={onChange}
                  {...field}
                />
              ) : (
                <InputMask
                  className={styles.inputMask}
                  type={type}
                  name={name}
                  step={step}
                  placeholder={placeholder}
                  onChange={onChange}
                  {...field}
                />
              )}
            </div>
          </div>
        )}
      />
    </div>
  );
};

export default TimerInput;

这是我的组件，这是我正在使用它的父组件

<div className={styles.quantity}>
  <TimerInput
    src={Percentage}
    type={"text"}
    label={"DISCOUNT"}
    style={{ width: "120px" }}
    name={"discount"}
    onChange={handlePercentage}
    control={control}
  />
</div>

const handlePercentage = (e) => {
  console.log(e.target.value); 
};

我已经在组件中传递了

onChange

，还尝试将箭头函数直接内联传递到

onChange

组件的

TimerInput

属性，但它不起作用。这有时可能会导致某些库或组件出现问题，这些库或组件在每次渲染时都需要函数引用而不是新的函数实例。

Answer 1

onChange 的顺序应该改变尝试使用 {...field} 更改它，因为字段对象还包含 onChange 它会覆盖您的 onChange 所以你需要做：<

<InputMask
                  className={styles.inputMask}
                  type={type}
                  name={name}
                  step={step}
                  placeholder={placeholder}
                   {...field}
                  onChange={onChange}
                />