javascript - 将输入文本连接到 slider

Question

我有一个文本输入框，允许用户输入数字。我想在其旁边添加一个 slider 控件，以便他们可以选择使用 slider 控件。 slider 将允许快速更改，而输入框将允许更精确的输入(特别是在 slider 具有巨大最小最大范围的情况下)。

连接这两者的最佳方式是什么？因此，如果用户在输入框中输入数字， slider 会自动将其位置移动到该数字所在的位置，反之亦然。如果用户移动 slider ，输入框会更新以显示 slider 所在的数字。

这就是我所拥有的

const [sliderValue, setsliderValue] = useState(15)

 <View style={{ flex: 1, alignItems: 'stretch', justifyContent: 'center' }}>
            <Slider 
                maximumValue={100}
                minimumValue={0}
                step={1}
                value= {sliderValue}
                onValueChange={newsliderValue => setsliderValue(newsliderValue)}  
            />
            <Text>Value:{sliderValue} </Text>
          </View>

          <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
              placeholder="RFC"
              underlineColorAndroid='transparent'
              onChangeText={newsliderValue => setsliderValue(newsliderValue)}
              value={sliderValue}
              autoCorrect={false}
              autoCapitalize='characters'
            />
          </View>

我使用 react native 元素的 slider ，我的问题是文本输入引发下一个错误“不变违规:iinvariant违​​规:无法插入不是数字的输入

我也无法将 {sliderValue} 作为文本输入中的占位符来显示与 slider 相同的数字

如有任何帮助，我们将不胜感激

Answer 1

不变性违规是尝试将字符串设置为 sliderValue 的结果。您必须使用 newSliderValue => setSliderValue(parseInt(newSliderValue))。我相信您可以使用 {sliderValue} 作为占位符。它只是可能不会显示占位符，因为该值始终已设置。