React Hook Form Controller，onChange 不触发

Question

我正在尝试将我的组件与控制器包装成 return 一些数值，但在某些组件中，控制器的 onChange 没有触发。不确定，为什么请找到附件中的代码。提前致谢

const Percentage: FC<PercentageProps & Partial<HTMLInputElement>> = ({ withForm, ...otherProps}) => {
  if(withForm){
    return (
      <FormControl {...otherProps}>
        <Controller
          render={({field: { value, onChange, name }}) => {
            return (
              <PercentageWrapper
                name={name}
                value={value}
                withForm={withForm}
                onChange={(e) => {
                  console.log('inside percentage controller >>>>>>>', e)
                  onChange && onChange(Math.ceil(e.target.value))
                }}
              />
            )
          }}
        >
        </Controller>
      </FormControl>
    )
  }
  return <PercentageWrapper {...otherProps}/>
}

这是处理表单条件的 percentageWrapper

百分比包装器

const PercentageWrapper: FC<PercentageProps & Partial<HTMLInputElement>> = (
  props: PercentageProps
) => {
  // Framework generated code, below line registers the component
  // NOT TO BE DELETED
  setMetaData('Percentage', metadata);

  // Framework generated code, below line provides the contextProvider instance

  const {
    id,
    onChange,
    showPercentSymbol,
    allowDecimalPlaces,
    withForm,
    value,
    ...rest
  } = props;
  return (
    <div data-component="atomic/percentage">
      <Input
        placeholder={'Percent'}
        value={value}
        inputSuffix={
          showPercentSymbol
            ? () => (
                <Text
                  type={TextTypes.Body}
                  size={TextSizes.Medium}
                  marginTop={'2px'}
                >
                  {'%'}
                </Text>
              )
            : undefined
        }
        {...rest}
      />
    </div>
  );
};

Answer 1

您没有将 onChange 传递给输入。

const {
    id,
    onChange, // <-- you destructure it here
    showPercentSymbol,
    allowDecimalPlaces,
    withForm,
    value,
    ...rest // <-- so it's not part of the `rest`
  } = props;

React Hook Form Controller，onChange 不触发

React Hook Form Controller, onChange not firing

reactjs

react-hook-form

百分比包装器