Javascript 重置为默认滑块值

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

这是滑块组件：

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
生命周期方法中监视并处理更新。