React Form 中的條件輸入選項/驗證

Question

我是 React 新手，我正在將 React 前端連接到 flask 后端。 我在一個小組項目中，但我以某種方式負責了 90% 的工作。 我已經使用 MUI 實現了這些字段，但我很靈活並且更喜歡工作而不是外觀。

我用 react-form-hooks 制作了一個表單，並嘗試實現一個自定義范圍 slider（很抱歉，它並沒有全部分解為組件，主要是單個文件）。 我是 React、JS 和 TSX 的新手（帖子底部有一個沙箱）。

*旁注：表格現在加載速度很慢，如有任何提高性能的提示，我們將不勝感激。 （：（實際上在這一點上感謝任何想法並樂於接受反饋）。

高級搜索表單

我想要達到的目標：

我正在嘗試將輸入作為表單中從 0 到 100 的值范圍。 默認情況下，這些值可以作為 [0,100] 傳遞，或者如果它們被更新，則在按下提交時將提交其 state 的當前值（[min，max]）。 該信息將作為 json 響應通過 post 請求傳遞給 api 后端。

我在網上找到了一些關於使用 react-hooks-form 實現范圍 slider 的選項，但不幸的是無法讓它們中的任何一個工作。 有人可以幫我實現范圍 slider（我需要在我的表格中使用其中的 3 個）嗎？

如果這不可能，請您協助使用以下替代方案之一：

選項 1：設置執行以下操作的 select 框/組合框：

根據相應的最大/最小選項為用戶提供最大或最小選項。 即，如果在最大或最小選擇/組合框中都沒有輸入：那么兩個框都將具有 0-100 作為值的可能范圍。 如果觸摸了一個框的值：那么第二個選擇/組合字段值將屬於該范圍的相應剩余部分。

例如，如果我選擇 70 作為我的最小值，我的其他選擇/組合將允許我將其留空，或者給我 70 到 100 的選項。或者如果我為最大輸入字段選擇 82 - 最小值的 select 只會請允許我使用 0 到 82 作為我的最小值或將其留空。

選項 2：具有與上述相同驗證模式的文本輸入字段，如果用戶輸入如下內容，將變成錯誤 state：藝術家評級最小值：40 藝術家評級最大值：20

這是沙箱：

https://codesandbox.io/s/advanced-search-form-forked-0lhgrv

Answer 1

感謝您更新帖子。
您的問題是Mui Slider組件不采用默認輸入道具，因此您無法傳播react-hook-form返回的register方法，因為它返回默認value和onChange道具。

但是react-hook-form是一個很棒的庫，它已經解決了與主要 React UI 庫的集成問題： https://react-hook-form.com/get-started#IntegratingwithUIlibraries

我在這里實現了一個基本的例子： https://codesandbox.io/s/wonderful-silence-9qlfbj?file=/src/App.js他們暴露了相當廣泛和清晰的 API，如果你打算使用你花時間研究它們它作為您的表單管理庫。