滑块 组件

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/

滑块 组件