滑塊 組件

by Robin Sandborg

羅賓·桑德伯格(Robin Sandborg)

組件制作：如何使用鏈接的輸入創建滑塊 (Component crafting: how to create a slider with a linked input)

Here at Stacc, we’re huge fans of React and the render-props pattern. When it came time to create a slider input, we turned to one of our favorite resources — Jared Palmers awesome-react-render-props. Here we found react-compound-slider.

在Stacc ，我們是React和render-props模式的忠實擁護者。 當需要創建滑塊輸入時，我們轉向了我們最喜歡的資源之一-Jared Palmers awesome-react-render-props 。 在這里，我們找到了react-compound-slider 。

Our challenge was to combine the slider with a linked input. The user could choose whether to input their data through the keyboard input or the slider.

我們的挑戰是將滑塊與鏈接的輸入結合起來。 用戶可以選擇通過鍵盤輸入還是滑塊輸入數據。

The slider and input were like your typical siblings, constantly bickering. When the input requested a value outside the domain of the slider or one that didn’t fall exactly on one of the sliders steps, the stubborn slider not only refused to listen to the input — it would force the input to change its value. The result was a frustrating user experience.

滑塊和輸入就像您的同級兄弟一樣，不斷吵架。 當輸入請求的值超出了滑塊的范圍，或者一個值未完全落在滑塊的其中一個臺階上時，頑固的滑塊不僅拒絕監聽輸入，還會強制輸入更改其值。 結果是令人沮喪的用戶體驗。

I’ve searched but didn't find someone who’d solved this for me. So, in the spirit of sharing, here’s my solution. If you have any ideas or suggestions about how it could be even better, please share! I am, after all, more designer than developer.

我進行了搜索，但沒有找到為我解決此問題的人。 因此，本著共享的精神，這是我的解決方案。 如果您有任何更好的建議或想法，請分享！ 畢竟，我是設計師，而不是開發商。

目標 (The goal)

Looks pretty simple, right? So let’s think about what we need to do here.

看起來很簡單，對吧？ 因此，讓我們考慮一下我們在這里需要做什么。

1. Put the shared value where both the slider and the input have access to it. In this case, we’ll make a component that wraps them both, and put the values there.
   將共享值放在滑塊和輸入均可訪問的位置。 在這種情況下，我們將制作一個將它們都包裝在一起的組件，并將值放在那里。
2. Manage the values sent to both the input and the slider when something changes in either of them.
   當它們中的任何一個發生更改時，管理發送到輸入和滑塊的值。
3. Avoid the strict rules of the slider’s domain (min and max) and steps from interfering with the users' ability to type a value into the input.
   避免嚴格限制滑塊域(最小和最大)的規則和步驟，以免干擾用戶在輸入中鍵入值的能力。

We’ll get back to the wrapping component later. First, let’s get our hands dirty with implementing the slider. Explanation below the example.

稍后我們將返回包裝組件。 首先，讓我們動手實施滑塊。 示例下方的說明。

Here I’ve implemented getDerivedStateFromProps. The slider needs to update its internal state from the values supplied from the slider’s props. I’ve also added some props for onUpdate, onChange and onSlideStart. We can handle these events in our wrapper component. Except for these details, this is pretty close to the code used in the react-compound-slider documentation.

在這里，我實現了getDerivedStateFromProps。 滑塊需要根據滑塊道具提供的值更新其內部狀態。 我還為onUpdate，onChange和onSlideStart添加了一些道具。 我們可以在包裝器組件中處理這些事件。 除了這些細節之外，這非常接近react-compound-slider文檔中使用的代碼。

The part I struggled with was handling the linking of the input and the slider. When typing, the value often goes outside of the slider’s permitted min and max values. There is no guarantee the user would type in a value that exactly matches any of the allowed steps in the slider.

我苦苦掙扎的部分是處理輸入和滑塊的鏈接。 鍵入時，該值通常超出滑塊允許的最小值和最大值。 不能保證用戶鍵入的值與滑塊中允許的任何步驟完全匹配。

If we didn’t handle these cases, the user would never be allowed to empty the input. If she typed a value outside any of the steps, it would just set the value to the closest step. Basically, any change in our input would result in the slider moving to where it thinks it should be, and thus updating our state with its value, overriding the value the user just typed.

如果我們不處理這些情況，將永遠不允許用戶清空輸入。 如果她在任何步驟之外都鍵入了一個值，則只會將該值設置為最接近的步驟。 基本上，輸入的任何更改都將導致滑塊移動到它認為應該的位置，從而用其值更新狀態，從而覆蓋用戶剛剛鍵入的值。

In order to handle these situations, I needed some logic. The best solution I could come up with was this:

為了處理這些情況，我需要一些邏輯。 我能想到的最好的解決方案是：

1. When the input has focus, set the step prop for the slider to be 1 so that it can be set to whatever the user types
   當輸入具有焦點時，將滑塊的步進屬性設置為1，以便可以將其設置為用戶鍵入的任何內容
2. If the input’s value changes AND the new value lies in the allowed range, set the slider’s value. Otherwise, do nothing.
   如果輸入值更改并且新值在允許的范圍內，請設置滑塊的值。 否則，什么都不做。
3. When the user starts dragging the slider, set the step prop to what it’s supposed to be again and update the value of the inputs.
   當用戶開始拖動滑塊時，將step prop設置為它應該的值，然后更新輸入的值。

You can see the entire implementation with more comments on CodeSandbox.

您可以在CodeSandbox上看到更多注釋的完整實現。

Thank you for reading!

感謝您的閱讀！

翻譯自: https://www.freecodecamp.org/news/component-crafting-how-to-create-a-slider-with-a-linked-input-600d3438a050/

滑塊 組件