[英]How can I change this functional component into a class based component in react native?
I am trying to change this functional-based component into a class-based component so that I can setState with value getting from slider left and right cursors.我正在尝试将这个基于功能的组件更改为基于类的组件,以便我可以使用从滑块左右光标获取的值来 setState。
import React, { useState } from "react";
import { StyleSheet, View, Text } from "react-native";
import MultiSlider from "@ptomasroos/react-native-multi-slider";
import CustomMarker from "./CustomMarker";
const App = () => {
const [
nonCollidingMultiSliderValue,
setNonCollidingMultiSliderValue
] = useState([0, 100]);
const nonCollidingMultiSliderValuesChange = (values) => {
console.log(values);
setNonCollidingMultiSliderValue(values);
};
return (
<View style={styles.container}>
<Text>MultiSlider</Text>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
marginTop: 10,
width: "310px"
}}
>
<View>
<Text
style={[
{ fontStyle: "italic" },
{ fontSize: 14, color: "#E4E4E4" }
]}
>
Min
</Text>
<Text
style={[{ fontWeight: "bold" }, { fontSize: 18, color: "#000000" }]}
>
{nonCollidingMultiSliderValue[0]}€
</Text>
</View>
<View>
<Text
style={[
{ fontStyle: "italic" },
{ textAlign: "right", fontSize: 14, color: "#E4E4E4" }
]}
>
Max
</Text>
<Text
style={[{ fontWeight: "bold" }, { fontSize: 18, color: "#000000" }]}
>
{nonCollidingMultiSliderValue[1]}€
</Text>
</View>
</View>
<MultiSlider
values={[
nonCollidingMultiSliderValue[0],
nonCollidingMultiSliderValue[1]
]}
onValuesChange={nonCollidingMultiSliderValuesChange}
min={0}
max={100}
step={1}
snapped
allowOverlap={false}
// minMarkerOverlapDistance={40}
minMarkerOverlapStepDistance={40}
customMarker={CustomMarker}
trackStyle={{
height: 5,
borderRadius: 8
}}
// containerStyle={{
// width: "100%",
// flexDirection: "column",
// justifyContent: "center",
// alignItems: "center"
// }}
selectedStyle={{
backgroundColor: "orange"
}}
unselectedStyle={{
backgroundColor: "#ABB5B6"
}}
/>
</View>
);
};
export default App;
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff",
width: "100%"
}
});
I already tried this but I am not able to take values of slider separately and setState.我已经试过了,但我无法分别获取滑块和 setState 的值。
Here is my code:这是我的代码:
MultiSlider
values={[this.state.rangeLow, this.state.rangeHigh]}
isMarkersSeparated={true}
customMarker={CustomMarker}
onValuesChange={(values) => {
this.setState({
rangeLow :values, rangeHigh: values,
});
}}
enabledOne
enabledTwo
min={0}
max={500}
step={1}
snapped
showSteps={true}
trackStyle={{
height: 5,
borderRadius: 8,
}}
/>
Everything is working fine but the values are like this 0-0
and when the cursor moves then the same values are on either side.一切正常,但值是这样的0-0
,当光标移动时,两侧的值相同。 But with the functional components, everything is fine.但是有了功能组件,一切都很好。
How can I change into a class-based component?如何更改为基于类的组件?
Your problem lies in your onValuesChange
prop:你的问题在于你的onValuesChange
道具:
onValuesChange = {(values) => {
this.setState({
[rangeLow, rangeHigh]: values,
});
}}
It isn't allowed to use array destructuring like that in JavaScript.不允许像 JavaScript 那样使用数组解构。 Use this instead:改用这个:
onValuesChange = {(values) => {
this.setState({
rangeLow: values[0], rangeHigh: values[1],
});
}}
Or with different syntax using destructuring:或者使用解构使用不同的语法:
onValuesChange = {([ rangeLow, rangeHigh ]) => {
this.setState({ rangeLow, rangeHigh });
}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.