Javascript 重置为默认滑块值

Javascript 重置为默认滑块值,javascript,react-native,slider,Javascript,React Native,Slider,我尝试为滑块创建一个重置按钮,按下该按钮时将其重置为初始值。我的代码没有显示任何错误,但重置按钮不起作用 这是滑块组件: import React, {Component} from 'react'; import {Slider, Text, StyleSheet, View} from 'react-native'; import {ButtonReset} from './ResetButton.js' export class SliderRoll extends Com

我尝试为滑块创建一个重置按钮,按下该按钮时将其重置为初始值。我的代码没有显示任何错误,但重置按钮不起作用

这是滑块组件:

import React, {Component} from 'react';
import {Slider,
  Text,
  StyleSheet,
  View} from 'react-native';
import {ButtonReset} from './ResetButton.js'


export class SliderRoll extends Component {

  state = {
    value: 1,
  };

  resetSliderValue = () => this.setState({value : 1})

  render() {
    return (
      <View style={styles.container}>
        <Slider style={styles.slider}
          minimumTrackTintColor={'blue'}
          maximumTrackTintColor={'red'}
          maximumValue = {2}
          value= {this.state.value}
          step={0.5}
          onValueChange={(value) => this.setState({value: value})} 
        />

        <ButtonReset resetSliderValue = {this.state.resetSliderValue}/>
        <Text style={styles.text} >
          {this.state.value}
        </Text> 

      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection:'column',
    width: 150,
    backgroundColor: 'pink',
    marginLeft: 50,
    justifyContent: 'center'
  },
  slider: {
    width: 150,
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    fontWeight: '500',
  },
})
import React,{Component}来自'React';
导入{滑块,
文本,
样式表,
从“react native”查看};
从“./ResetButton.js”导入{ButtonReset}
导出类SliderRoll扩展组件{
状态={
价值:1,
};
resetSliderValue=()=>this.setState({value:1})
render(){
返回(
this.setState({value:value})}
/>
{this.state.value}
);
}
}
const styles=StyleSheet.create({
容器:{
flexDirection:“列”,
宽度:150,
背景颜色:“粉色”,
marginLeft:50,
为内容辩护:“中心”
},
滑块:{
宽度:150,
},
正文:{
尺寸:20,
textAlign:'中心',
容重:“500”,
},
})
这是重置按钮:

import React, {Component} from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  TouchableOpacity
} from 'react-native';

export class ButtonReset extends Component{
    render(){
      return(
        <TouchableOpacity style = {styles.container}
            onPress= {this.props.resetSliderValue}>
          <Image
            style={styles.button}
            source={require('./restart.png')}
          />
        </TouchableOpacity>
      );
    }
}

const styles = StyleSheet.create({
    container: {
        width: 50,
        alignItems: 'center',
        backgroundColor: 'pink',
        marginLeft: 50,
        marginTop: 10,
    },
    button: {
        width:50,
        height:50,
        transform: [
            {scale: 1}
        ] 
    }
})
import React,{Component}来自'React';
进口{
文本,
看法
样式表,
形象,,
可触摸不透明度
}从“反应本机”;
导出类按钮设置扩展组件{
render(){
返回(
);
}
}
const styles=StyleSheet.create({
容器:{
宽度:50,
对齐项目:“居中”,
背景颜色:“粉色”,
marginLeft:50,
玛金托普:10,
},
按钮:{
宽度:50,
身高:50,
转换:[
{比例:1}
] 
}
})

这是一个有问题的部分,它马上就突出了:

我认为应该是:

另外,我认为您需要绑定
,以便可以访问
,以便在
resetSliderValue
函数中设置状态。我个人喜欢在构造函数中为任何需要它的函数绑定一次,这样在渲染期间就不会进行不必要的重新绑定:

constructor(props) {
  super(props);
  this.resetSliderValue = this.resetSliderValue.bind(this);
}

下面是一个有问题的部分,它马上就突出了:

我认为应该是:

另外,我认为您需要绑定
,以便可以访问
,以便在
resetSliderValue
函数中设置状态。我个人喜欢在构造函数中为任何需要它的函数绑定一次,这样在渲染期间就不会进行不必要的重新绑定:

constructor(props) {
  super(props);
  this.resetSliderValue = this.resetSliderValue.bind(this);
}

我认为
这个
绑定是不必要的,因为他使用了ES7语法。谢谢你,你的答案很好。我还有另一个问题:有没有可能通过一个道具来成为孩子的一种状态。例如:在子组件上,我定义state={this.props.example}我不确定我是否理解您的问题。您可以从props将state的值初始化为某物。如果道具发生更改,则它不会更新状态,除非您在
组件将接收道具
生命周期方法中监视并处理更新。我认为
绑定是不必要的,因为他使用了ES7语法。谢谢您,您的回答非常有效。我还有另一个问题:有没有可能通过一个道具来成为孩子的一种状态。例如:在子组件上,我定义state={this.props.example}我不确定我是否理解您的问题。您可以从props将state的值初始化为某物。如果道具发生更改,则它不会更新状态,除非您在
componentWillReceiveProps
生命周期方法中监视并处理更新。