React Form 中的条件输入 options/validation
Conditional input options/validation in React Form
我是 React 新手，我正在将 React 前端连接到 Flask 后端。我在一个小组项目中，但我以某种方式负责了 90% 的工作。我已经使用 MUI 实现了这些字段，但我很灵活，更喜欢工作而不是外观。
我用 react-form-hooks 制作了一个表单，并尝试实现一个自定义范围滑块（很抱歉，它并没有全部分解为组件，主要是单个文件）。我是 React、JS 和 TSX 的新手（post 底部有一个沙箱）。
*旁注：目前表单加载速度很慢，如有任何改进性能的提示，我们将不胜感激。 (:
（实际上在这一点上感谢任何想法并乐于接受反馈）。
Advanced Search Form
我想要达到的目标：
我正在尝试将输入作为表单中从 0 到 100 的值范围。默认情况下，这些值可以作为 [0,100] 传递，或者如果它们被更新，则在按下提交时将提交其状态的当前值（[min，max]）。该信息将作为 json 响应通过 post 请求传递给 api 后端。
我在网上找到了一些关于使用 react-hooks-form 实现范围滑块的选项，但不幸的是无法使它们中的任何一个工作。有人可以帮我实现范围滑块吗（我需要在我的表单中使用其中的 3 个）？
如果这不可能，请您协助使用以下替代方案之一：
选项 1：设置执行以下操作的 select box/combo-box：
根据相应的 max/min 选项为用户提供最大或最小选项。 IE。如果在 Max 或 Min select/combo-box 中都没有输入：那么两个框的可能值范围都是 0-100。如果触摸了一个框的值：那么第二个 select/combo 字段值将是相应范围的剩余部分。
例如如果我 selected 70 作为我的最小值，我的另一个 select/combo 会为我提供空白，或者给我 70 到 100 的选项。或者如果我 selected 82最大输入字段 - 最小值的 select 只允许我使用 0 到 82 作为我的最小值或将其留空。
选项 2：
具有与上述相同验证模式的文本输入字段，如果用户输入如下内容，将变为错误状态：
艺术家评分最低：40
艺术家评分上限：20
这是沙盒：
感谢更新 post。
您的问题是 Mui Slider 组件不采用默认输入道具，因此您无法传播 react-hook-form 返回的 register 方法，因为它 returns 默认 value 和 onChange 道具。
但是 react-hook-form 是一个很棒的库，它已经解决了与主要反应 UI 库的集成问题：https://react-hook-form.com/get-started#IntegratingwithUIlibraries
我在这里实现了一个基本示例：
https://codesandbox.io/s/wonderful-silence-9qlfbj?file=/src/App.js
它们公开了相当广泛和清晰的 API，如果您打算将其用作表单管理库，请花时间研究它们。
我是 React 新手，我正在将 React 前端连接到 Flask 后端。我在一个小组项目中，但我以某种方式负责了 90% 的工作。我已经使用 MUI 实现了这些字段，但我很灵活，更喜欢工作而不是外观。
我用 react-form-hooks 制作了一个表单，并尝试实现一个自定义范围滑块（很抱歉，它并没有全部分解为组件，主要是单个文件）。我是 React、JS 和 TSX 的新手（post 底部有一个沙箱）。
*旁注：目前表单加载速度很慢，如有任何改进性能的提示，我们将不胜感激。 (: （实际上在这一点上感谢任何想法并乐于接受反馈）。
Advanced Search Form
我想要达到的目标：
我正在尝试将输入作为表单中从 0 到 100 的值范围。默认情况下，这些值可以作为 [0,100] 传递，或者如果它们被更新，则在按下提交时将提交其状态的当前值（[min，max]）。该信息将作为 json 响应通过 post 请求传递给 api 后端。
我在网上找到了一些关于使用 react-hooks-form 实现范围滑块的选项，但不幸的是无法使它们中的任何一个工作。有人可以帮我实现范围滑块吗（我需要在我的表单中使用其中的 3 个）？
如果这不可能，请您协助使用以下替代方案之一：
选项 1：设置执行以下操作的 select box/combo-box：
根据相应的 max/min 选项为用户提供最大或最小选项。 IE。如果在 Max 或 Min select/combo-box 中都没有输入：那么两个框的可能值范围都是 0-100。如果触摸了一个框的值：那么第二个 select/combo 字段值将是相应范围的剩余部分。
例如如果我 selected 70 作为我的最小值，我的另一个 select/combo 会为我提供空白，或者给我 70 到 100 的选项。或者如果我 selected 82最大输入字段 - 最小值的 select 只允许我使用 0 到 82 作为我的最小值或将其留空。
选项 2： 具有与上述相同验证模式的文本输入字段，如果用户输入如下内容，将变为错误状态： 艺术家评分最低：40 艺术家评分上限：20
这是沙盒：
感谢更新 post。
您的问题是 Mui Slider 组件不采用默认输入道具，因此您无法传播 react-hook-form 返回的 register 方法，因为它 returns 默认 value 和 onChange 道具。
但是 react-hook-form 是一个很棒的库，它已经解决了与主要反应 UI 库的集成问题：https://react-hook-form.com/get-started#IntegratingwithUIlibraries
我在这里实现了一个基本示例： https://codesandbox.io/s/wonderful-silence-9qlfbj?file=/src/App.js 它们公开了相当广泛和清晰的 API，如果您打算将其用作表单管理库，请花时间研究它们。