Material-ui: العمل مع شكل خطاف التفاعل

لقد قمت بإضافة علامة waiting for users upvotes . أنا أغلق القضية لأننا لسنا متأكدين من أن الناس يبحثون عن هذا الدعم. لذا يرجى التصويت على هذه المشكلة إذا كنت كذلك. سوف نعطي الأولوية لجهودنا بناءً على عدد الأصوات المؤيدة.

https://npm-stat.com/charts.html؟package=formik&package=react-hook-form&package=react-final-form

حاجة ماسة: صلاة :: صلاة :: صلاة: أي حل؟

حاجة ماسة!

بالتأكيد هناك حاجة.

أي فكرة عما سيكون الحل؟

لست متأكدًا من شيء محدد ولكني أعلم أنني بدأت في استخدام كلتا المكتبتين وأود حقًا أن أرى تكاملًا أكثر إحكامًا بين الاثنين. شكل خطاف التفاعل وواجهة المستخدم المادية رائعان معًا. دعمهم لـ TypeScript جيد أيضًا.

مرحبًا ، شكرًا oliviertassinari لإلقاء نظرة عليه. يبدو أن MUI TextField يعمل بشكل أفضل مع واجهة برمجة تطبيقات الإدخال الأصلي الآن! هذا رائع حقًا. اعتدنا أن يكون لدينا تراكب نص العنصر النائب أعلى النص عند استدعاء e.target.value = 'xxx' . 👍

https://codesandbox.io/s/react-hook-form-conditional-fields-delete-1frsm
في المثال أعلاه <Switch /> لم إعادة تعيين بعد reset استدعاء API.

سيكون من الرائع حقًا إذا كان بإمكاننا الحصول على جميع المكونات ذات الصلة بالنموذج لدعم واجهة برمجة التطبيقات (API) لإدخال النموذج الأصلي (تعيين القيمة وإعادة تعيينها عبر مرجع الإدخال) أنا أفهم أنه جزء كبير من العمل ودعم lib صغير مثل رد فعل هوك شكل هو شيء يجب مراعاته (ربما حتى إذا أصبح الليب أكثر شهرة ❤️)

مرة أخرى ، أنا أقدر وقتك وجهدك للنظر في هذه المشكلة (الحفاظ على مشروع ضخم مفتوح المصدر مثل MUI هو أمر مجنون بالنسبة لي وأنت تقوم بعمل رائع لمجتمع React). علاوة على ذلك ، اسمحوا لي أن أعرف ما إذا كان أي شيء يمكنني العمل عليه من طرفي للعمل مع MUI أيضًا.

هتافات
مشروع قانون

@ bluebill1049 شكرا للنظر في ذلك. يبدو أن المكتبة تحظى بقبول جيد ، لكنها لا تزال بعيدة عن الفورميك. هل التبديل هو المشكلة الوحيدة لدينا؟

شكرًا ، oliviertassinari لإعادة فتح هذه المشكلة والنظر فيها. 🙏 نعم، أنت على حق react-hook-form لا يزال صبيا جديد في البلدة ولم يكن لديك عمل إذا كنت ترغب في الانتظار بعض الوقت لمعرفة ما إذا كان المزيد من المستخدمين اعتماد react-hook-form ، التي أعتقد أنه أمر منطقي تمامًا (حتى مع وجود قلبي ، فأنا أرغب بشدة في العمل مع MUI ، هاهاها كانت أنانية؟). في غضون ذلك ، سوف أقوم بإنشاء جدول من المدخلات متوافق مع react-hook-form خارج الصندوق (ربما حتى مع علبة و codebox أيضًا) سأقوم بنشره هنا أيضًا.

إذا كانت الأشياء تعمل بشكل جيد مع شكل الخطاف التفاعلي وازداد الاستخدام ، فربما يمكننا التفكير في العمل مع واجهة برمجة تطبيقات الإدخال الأصلية (وهو ما يستخدمه نموذج ربط التفاعل خلف الكواليس) سيكون من الرائع الحصول على input ، select ، radio و checkbox تعمل لأن هذه هي الاستخدام الأساسي للنموذج.

لمعلوماتك oliviertassinari أنا أعمل على شيء ما لسد الفجوة بين MUI وشكل التفاعل. https://github.com/react-hook-form/react-hook-form-input

تواجه أيضًا مشكلة في إعادة تعيين البيانات الافتراضية وتحميلها. يرجى النظر في هذه القضية. أو على الأقل توفير عمل في الوقت الحالي.

مرحبًا raikusy ، يرجى إلقاء نظرة على الرابط الذي نشرته أعلاه ، أعتقد أنه سيساعدك. على المدى الطويل ، سيكون من الرائع أن يدعم مكون MUI النموذج الأصلي "إعادة تعيين" وقيمة التحديث عبر المكون "المرجع" ، ولكن هذا سعر كبير للعمل وأنا متأكد من أن MUI لديها الكثير من الميزات والأفكار المصطفة أيهما أكثر أهمية. تمامًا كما ناقشنا أعلاه حتى يصبح شكل خطاف التفاعل هو lib السائد أو يصبح شائعًا ، ستبدأ MUI في البحث عن حلول. آمل أن يكون هذا منطقيًا :) شكرًا لاستخدام شكل خطاف التفاعل أيضًا

لمعلوماتك ، سيظل مكون المجمّع هذا يمكّن نموذجك من الحصول على 0 إعادة تصيير. لأن تحديث حالة الإدخال معزول داخل مكون الغلاف

شكرا لك @ bluebill1049 هذا يبدو رائعا. لدي شرط حيث سيكون لحقول النموذج قيمة افتراضية عند تمرير البيانات من الدعائم. فهل سيعمل مكون TextField مع الحل أعلاه أيضًا؟ كما أنني كنت أبحث عن أي مثال أفضل لتمرير القيم الافتراضية مع الدعائم إلى النموذج. قد تأتي الدعائم في وقت ما من مكالمة api بعد تثبيت النموذج بالفعل.

raikusy ، يجب أن تكون قادرًا على استخدام reset / setValue API مع مكون المجمع.
إعادة تعيين: للنموذج بالكامل -> https://react-hook-form.com/api#setValue
setValue: للفرد -> https://react-hook-form.com/api#reset

لا يمكنني الحصول على <Slider /> للعمل مع RHF.

استخدامه مثل:

      <FormControl fullWidth component="fieldset" margin="normal">
        <FormLabel component="legend">Palavras</FormLabel>
        <RHFInput
          as={<Slider min={100} max={1200} step={100} valueLabelDisplay="auto" marks={marks} />}
          type="input"
          name="words"
          register={register}
          setValue={setValue}
        />
      </FormControl>

أحصل على الخطأ التالية:

Warning: Failed prop type: Invalid prop `value` supplied to `ForwardRef(Slider)`.
    in ForwardRef(Slider) (created by WithStyles(ForwardRef(Slider)))
    in WithStyles(ForwardRef(Slider)) (created by SetupAccountForm)
    in Unknown (created by SetupAccountForm)
    in fieldset (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by SetupAccountForm)
    in form (created by SetupAccountForm)
    in SetupAccountForm (created by SetupAccountPage)
    in div (created by ForwardRef(CardContent))
    in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
    in WithStyles(ForwardRef(CardContent)) (created by SetupAccountPage)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by SetupAccountPage)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Layout)
    in Layout (created by SetupAccountPage)
    in SetupAccountPage (created by App)
    in Route (created by App)
    in Switch (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in App (created by Root)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (created by Root)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (created by Root)
    in Provider (created by Root)
    in Root Button.js:233:15

hbarcelos يبدو أن شريط التمرير لا يدعم دعائم القيمة :( سأقوم ببعض الاستقصاء عنها. في هذه الأثناء ، قد تضطر إلى استخدام سجل مخصص ، وهو التسجيل على useEffect

شكرا جزيلا @ bluebill1049

انتهى بي الأمر بصنع شيء مثل هذا:

import React, { useEffect, useCallback, useState, useMemo } from 'react';
import t from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Slider from '@material-ui/core/Slider';

const useStyles = makeStyles(theme => ({
  sliderWrapper: {},
  sliderLabel: {
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(0.5),
    color: theme.palette.primary.main,
  },
}));

function CustomSlider({
  register,
  unregister,
  setValue,
  name,
  rules,
  defaultValue,
  valueLabelAs,
  formatLabel,
  ...rest
}) {
  const cl = useStyles();

  const [currentValue, setCurrentValue] = useState(defaultValue);

  useEffect(() => {
    register({ name });
    return () => unregister(name);
  }, [defaultValue, name, register, setValue, unregister]);

  const valueLabel = useMemo(() => {
    if (!valueLabelAs) {
      return null;
    }

    return React.cloneElement(
      valueLabelAs,
      { className: clsx(valueLabelAs.props.className, cl.sliderLabel) },
      formatLabel(currentValue)
    );
  }, [cl.sliderLabel, currentValue, formatLabel, valueLabelAs]);

  const handleChange = useCallback(
    (_, value) => {
      setValue(name, value);
      setCurrentValue(value);
    },
    [name, setValue]
  );

  return (
    <React.Fragment>
      {valueLabel}
      <Box className={cl.sliderWrapper}>
        <Slider {...rest} onChange={handleChange} defaultValue={defaultValue} />
      </Box>
    </React.Fragment>
  );
}

CustomSlider.defaultProps = {
  rules: {},
  defaultValue: '',
  valueLabelAs: null,
  formatLabel: v => v,
};

CustomSlider.propTypes = {
  register: t.func.isRequired,
  unregister: t.func.isRequired,
  setValue: t.func.isRequired,
  name: t.string.isRequired,
  rules: t.object,
  defaultValue: t.oneOfType([t.number, t.string]),
  valueLabelAs: t.node,
  formatLabel: t.func,
};

export default CustomSlider;

يعمل كما هو متوقع.

هناك حاجة ماسة لهذا أيضا

على المدى الطويل ، سيكون من الرائع أن يدعم مكون MUI "إعادة تعيين" النموذج الأصلي لواجهة برمجة التطبيقات وتحديث القيمة عبر المكون "المرجع".

@ bluebill1049 أليست هذه مشكلة في
لنفترض أنني مطور React أقوم بإنشاء مدخلات مخصصة ، وأريد تصميم العنصر بشكل مختلف عندما يكون مملوءًا / فارغًا ، كيف يمكنني تنفيذ ذلك؟ يبدو أنه لم يتم إطلاق أي حدث تغيير على الإطلاق.

هل فكرت في إطلاق حدث تغيير عندما تقوم مكتبتك بتغيير قيمة إدخال "خارج" النموذج التصريحي لـ React؟ مثل ما تم إجراؤه في @ test-library / رد فعل؟

سيمكن هذا من دعم مكونات واجهة المستخدم المادية التي تعتمد على عناصر الإدخال الأصلية ، وبالنسبة للآخرين ، مثل شريط التمرير ، ستظل هناك حاجة إلى غلاف مخصص. يحتوي شريط التمرير على خاصية value لكن توقيع onChange يختلف عن المدخلات الأصلية. أعتقد أنه سيكون من الرائع رؤية مكتبة تكامل كما لدينا في مكتبات النماذج الأخرى: # 15585.

كنت أتساءل لماذا حصلت هذه القضية على الكثير من الأصوات المؤيدة ، أعتقد أنني اكتشفت ذلك 🙃:

https://react-hook-form.com/advanced-usage#ControlledmixedwithUncontrolledComponents

مرحبًا oliviertassinari ، شكرًا للنظر عن قرب لهذه المشكلة مرة أخرى 👍

لنفترض أنني مطور React أقوم بإنشاء مدخلات مخصصة ، وأريد تصميم العنصر بشكل مختلف عندما يكون مملوءًا / فارغًا ، كيف يمكنني تنفيذ ذلك؟ يبدو أنه لم يتم إطلاق أي حدث تغيير على الإطلاق.

سأبحث عن محدد CSS للحلول في مشروعي الخاص الذي يستخدم مدخلات أصلية ، على سبيل المثال: حدد عنصرًا له قيمة فارغة واعرض نمطًا. كبديل يمكنني استخدام رد فعل هوك-شكل watch API لاكتشاف القيمة الفارغة وتمريرها كـ prop (مع مكون الإدخال المغلف الخاص بي).

هل فكرت في إطلاق حدث تغيير عندما تقوم مكتبتك بتغيير قيمة إدخال "خارج" النموذج التصريحي لـ React؟ مثل ما تم إجراؤه في @ test-library / رد فعل؟

نعم ، نحن نقوم بذلك إلى حد كبير بأقل من react-hook-form-input . 😄

أنا أؤمن بالمكونات غير الخاضعة للرقابة لبناء النماذج بعد سنوات عديدة من التحكم في شكل البناء ، إنه حقًا يجعل الأمور أسهل كثيرًا. قد لا تحل كل حالة متطرفة (إذا كنت تعمل في Facebook LOL) ولكنها بالتأكيد تجعل حياتي العملية والآخرين من حولي أسهل عندما يتعلق الأمر ببناء النماذج. تعد مدخلات HTML ذات الحالة نفسها وأود أن أتبناها في هذا lib (لا أقول أنه صحيح أو خاطئ ، ولكن حل بديل).

أحب بناء تطبيق React كثيرًا ، ولهذا السبب أُنشئ الكثير من الحزم حوله. أنا أفهم أن React تتضمن مكونات مضبوطة. ومع ذلك ، فإن نموذج الخطاف التفاعلي لا يمنع المطورين من التحكم في نموذج البناء ، لأنه لا يزال بإمكانك إجراء تخصيص register بسعر useEffect .

استنتاج:

أعتقد أنه يمكننا إغلاق هذه المشكلة وسأزيل الرابط الموجود على موقع الويب الخاص بي المتعلق بهذه المشكلة. علاوة على ذلك ، هل يمكنني تحديث هذه الصفحة لتشمل react-hook-form-input ؟

https://material-ui.com/components/text-fields/#complementary -projects

نعم ، نحن نقوم بذلك إلى حد كبير في ظل إدخال شكل خطاف رد فعل.

@ bluebill1049 يبدو أنه النهج المعاكس

• رد فعل هوك شكل:
  
  
  
  1. فإنه يتتبع إدخال عقد DOM. عندما يحتاج إلى تغيير القيمة ، فإنه يفعل input.value = 'x' . هذا يمثل مشكلة بالنسبة لـ React ، لأنه ليس لديها أي طريقة لمعرفة أن قيمة الإدخال قد تغيرت. على سبيل المثال ، لا يتم تشغيل حدث تغيير .
  
  
  2. نظرًا لأن نموذج الخطاف التفاعلي يحتاج إلى الاستماع إلى تغييرات قيمة الإدخال ، فإنه يقوم بتعيين مستمع حدث "إدخال" على الإدخال . هذا يمثل مشكلة لمكتبتك لأن التغييرات بواسطة React لا تؤدي إلى أي حدث عندما تتغير القيمة من إدخال مضبوط .
  
  
• رد فعل شكل خطاف المدخلات: المكتبة تتحكم في المدخلات للتغلب على اثنين من القيود السابقة لشكل رد فعل هوك (الأول والثاني).

بالنظر إلى ذلك 1. من غير المحتمل جدًا أن تعمل React بشكل جيد لدعم نهج رد فعل الخطاف و 2. لا يعمل شكل خطاف التفاعل هذا خارج الصندوق بمدخلات خاضعة للرقابة وغير خاضعة للرقابة (تلك التي تغير القيمة الافتراضية وتلك التي تستمع فقط إلى onChange) ، أقترح ما يلي:

1. تصحيحات الشكل الخطاف المتفاعل المشكلة الخاضعة للرقابة وغير المتحكم فيها داخليًا. في الأساس ، تحتاج إلى حل i. والثاني. (انظر الحلول المقترحة في الأكواد والصناديق المرتبطة: إيفاد + تعريف الملكية).
2. تسعى Material-UI للحصول على المساعدة من المجتمع لتوفير محولات لشكل خطاف التفاعل عند الحاجة (يتعلق بالرقم 15585 #).
3. نغلق هذه القضية 👌

شكرًا ، oliviertassinari على الرد المفصل. سأقوم ببعض التحقيق الإضافي مع الحلول المقترحة الخاصة بك :)

أعتقد أن معظم المشكلة التي ذكرتها أعلاه مع React هي عندما تقوم بتبديل المكونات التي يتم التحكم فيها وهو الجزء الذي أرغب في تحسينه.

فقط لأكون واضحا:

• لإعادة إنتاج المشكلة عند التغيير ، انتقل إلى https://codesandbox.io/s/heuristic-galileo-1wf8c وانقر على الزر => السجل المفقود. الآن ، توجه إلى https://codesandbox.io/s/silly-allen-72zz7 وشاهد كيف يحل نهج الإرسال المشكلة.
• لإعادة إنتاج مشكلة تغيير القيمة ، انتقل إلى https://codesandbox.io/s/elastic-agnesi-osuuy وانقر على الزر => السجل المفقود. الآن ، توجه إلى https://codesandbox.io/s/sparkling-rain-3rebh وشاهد كيف يحل نهج Object.defiendProperty المشكلة.

لذلك أنا متأكد من أنه يمكنك حل ذلك في شكل خطاف التفاعل. سنكون ممتنين إذا أمكنك محاولة / نشر هذه الإصلاحات وإزالة اللوم من جانبنا من وثائقك 😛.

يجب أن تساعد هذه التغييرات حقًا في جذب مكتبة النماذج الخاصة بك ، وآمل أن تقدرها: د.

أعتقد أن معظم المشكلة التي ذكرتها أعلاه مع React هي عندما تقوم بالتبديل من المكونات الخارجة عن السيطرة إلى المكونات الخاضعة للرقابة وهو الجزء الذي أرغب في تحسينه.

يحذر React عندما ينتقل المستخدم بين المتحكم فيه وغير المتحكم فيه. أنا لا أفهم وجهة نظرك.

لذلك أنا متأكد من أنه يمكنك حل ذلك في شكل خطاف التفاعل. سنكون ممتنين إذا أمكنك محاولة / نشر هذه الإصلاحات وإزالة اللوم من جانبنا من وثائقك 😛.

لا طريقة أنا ألوم MUI هاها ، أنا أحب MUI (مع نجمي الصغير ⭐️). كما تعلمون ، فإن شكل خطاف التفاعل هو فتى جديد في المدينة ، كنت أحاول الحصول على بعض الاهتمام أو الزخم بشأن قضية معينة. أعتذر إذا وجدت بهذه الطريقة (اللوم). مرة أخرى شكرا جزيلا لمساعدتك والتحقيق.

(لا يلوم)

أعتقد أن معظم المشكلة التي ذكرتها أعلاه مع React هي عندما تقوم بالتبديل من المكونات الخارجة عن السيطرة إلى المكونات الخاضعة للرقابة وهو الجزء الذي أرغب في تحسينه.

يحذر React عندما ينتقل المستخدم بين المتحكم فيه وغير المتحكم فيه. أنا لا أفهم وجهة نظرك.

آسف قصدت عنصر التحكم :) ثابت تعليقي

@ a7bbth_official :

شكرا جزيلا oliviertassinari (أنت لطيف جدا)

لاحظ أن Material-UI يمكن أن تطبق نفس الإصلاحات المقترحة لكنني لا أعتقد أنه ينبغي لنا ذلك ، سيكون لها عيبان: 1. ستعمل فقط مع Material-UI ، يجب بذل نفس الجهد مرارًا وتكرارًا. 2. يجب أن تظل ملكية هذه "الاختراقات" في شكل خطاف رد الفعل لأنها تنشأ من المقايضة التي اتخذتها المكتبة (تجاوز واجهة برمجة تطبيقات React الاصطلاحية).

مرحبًا يا رفاق ، في حالة تدخل أحدهم في هذه المشكلة. (لقد عملنا سرا على هذا لفترة من الوقت 😓)

نحن نعمل على الإصدار الرئيسي التالي من RHF ، والذي يحتوي على بعض تحديثات جودة الحياة ، خاصة حول المكون الخاضع للرقابة. سيكون لدينا دعم أفضل لمكتبة واجهة المستخدم. ستعمل الشفرة التالية على حل setValue و defaultValue لمكتبة واجهة المستخدم الخاضعة للرقابة مع الحفاظ على الحد الأدنى من إعادة العرض على مستوى التطبيق / النموذج ، سيتم عزل إعادة التقديم على مستوى مكون الإدخال.

سيكون ما يلي هو بناء الجملة عند استخدام V4 من RHF.

import TextField from '@material-ui/core/TextField';

const { control } = useForm();

<Controller as={TextField} control={control} name="firstName" rules={{ required: true }} />

تحتاج مساعدة.
أواجه مشكلة في حقل النص الخاص بالمواد (من المحتمل أيضًا أن تكون mui أخرى).
عندما يكون حقل النص فارغًا ، يكون ملف تخزين المفاتيح الأول بطيئًا ، وينطبق الشيء نفسه عند تغيير القيمة إلى فارغ.
لسبب ما ، فإنه يعيد عرض النموذج بالكامل.

ملاحظة سريعة : أنا أكتب بسرعة ، دون أي تأخير. هم تأخير جزء يرجع إلى السبب المذكور أعلاه.

مرحبًا يا رفاق ، تستمر هذه المشكلة حتى لو استخدمت وحدة التحكم من شكل خطاف التفاعل :(
هل يمكن إعادة فتح هذه القضية؟ أم أنني أفعل ذلك خطأ؟

مثال: https://codesandbox.io/s/example-muitextfield-setvalue-with-react-hook-form-kqwq0؟file=/index.js

تحرير: الحل الذي أستخدمه هو InputLabelProps={isEdition && { shrink: isEdition }}
حيث isEdition هو العلم الذي أستخدمه في شاشة التحرير.

Luccasoli الرجاء الرجوع إلى المستند: https://react-hook-form.com/api#Controller

يوجد مثال بأمثلة MUI: https://codesandbox.io/s/react-hook-form-controller-079xx

آسف @ bluebill1049 ، لكني لم أجد أي موقف مشابه في هذا المثال ، وفي الوثائق لم أجد أي دعم يمكنه حل هذه المشكلة بشكل صحيح :(

Luccasoli ألق نظرة على defaultValue

حاولت:

• حاولت تحويل القيم الافتراضية داخل useForm () إلى قيمة حالة ، وقمت بتعيين هذه الحالة داخل useEffect ()
• حاولت استخدام نفس الفكرة ، ولكن في خاصية defaultValue مباشرة لكل وحدة تحكم

في كلتا الطريقتين ، لا يتعرف textField على أن الإدخال مملوء ، وتحتفظ التسمية فوق الإدخال

https://codesandbox.io/s/example-muitextfield-setvalue-with-react-hook-form-ijxfp

نعم ، ولكن من الغريب الاحتفاظ بقيمة افتراضية من هذا القبيل ، أحاول دائمًا البدء بقيمة سلسلة فارغة حتى لا تظهر قيمة غريبة للمستخدم.

يمكنني حتى عرض قيمة افتراضية "تحميل" ، ولكن لا تزال القيمة الأولية الفارغة تبدو أكثر إثارة للاهتمام ، هل تعتقد أن ذلك ممكن؟

تحرير: نعم ، يعمل مع سلسلة فارغة أيضًا ...

@ bluebill1049 لقد قمت بتعديل العرض التوضيحي الخاص بك لإظهار المشكلة التي أراها وآمل أن يكون لديك حل جيد.
https://codesandbox.io/s/react-hook-form-controller-n196b؟file=/src/index.js
يتم تحديد محاولة التحقق من صحة مربع الاختيار قبل تمكين الزر. تعمل جميع الحقول الأخرى التي استخدمتها كما هو متوقع باستثناء مربع الاختيار.

لقد وجدت أن صندوق الرمل هذا مفيد حقًا لواجهة المستخدم المادية - هناك أمثلة لأشرطة التمرير ، اختر وعدد قليل من الأمثلة الأخرى.
https://codesandbox.io/s/react-hook-form-controller-079xx؟file=/src/index.js