使用SliderComponent输入的react-hook -form

import React from 'react';
import { useForm } from 'react-hook-form';

const SliderComponent = ({ name, value, onChange, min, max }) => (
  <input
    type="range"
    name={name}
    value={value}
    onChange={onChange}
    min={min}
    max={max}
  />
);

const App = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <SliderComponent
        name="sliderValue"
        min={0}
        max={100}
        {...register("sliderValue", { required: true })}
      />
      {errors.sliderValue && <span>This field is required</span>}
      <button type="submit">Submit</button>
    </form>
  );
};

export default App;

const SliderComponent = ({ name, value, onChange, min, max }) => (
  <input
    type="range"
    name={name}
    value={value}
    onChange={(e) => onChange(e.target.value)}
    min={min}
    max={max}
  />
);

<SliderComponent
  name="sliderValue"
  min={0}
  max={100}
  {...register("sliderValue", { required: true })}
/>