重置为默认滑块值react-native

我尝试为滑块创建一个重置按钮，该按钮会在按下时将其重置为初始值。我的代码不显示任何错误，但重置按钮不起作用。重置为默认滑块值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 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} 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} 
     ] 
    } 
})

来源

2017-07-08 Thanh Pham

这里是有问题的一块伸出马上：

<ButtonReset resetSliderValue = {this.state.resetSliderValue}/>

我相信它应该是：

<ButtonReset resetSliderValue = {this.resetSliderValue}/>

而且，我相信你需要绑定this这样你就可以在resetSliderValue功能设置状态访问this。我个人喜欢在构造函数中绑定一次函数，因此在渲染过程中不需要重新绑定：

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

来源

2017-07-08 04:20:01

我认为'this'绑定将不是必需的，因为他已经使用了ES7语法。 –

谢谢你的回答完美。我还有另外一个问题：是否可以通过一个道具成为一个孩子的状态。例如：在子组件上，我定义了state = {this.props.example} –

我不确定我理解你的问题。你可以将状态值初始化为道具。如果道具改变了，它就不会更新状态，除非你监视它并处理'componentWillReceiveProps'生命周期方法中的更新。 –

重置为默认滑块值react-native

回答

相关问题