设置状态不会更改 React Native Slider 上的值答案

【问题标题】：Set State isn't changing the value on React Native Slider设置状态不会更改 React Native Slider 上的值
【发布时间】：2017-12-17 00:39:59
【问题描述】：

所以我一直试图弄清楚如何更改我的文本组件在屏幕上的值。不幸的是，无论我做什么，价值都保持不变。该值打印在终端上，但似乎不会更改屏幕上的文本。谁能指出我正确的方向。任何帮助将不胜感激。

 const Speed =({navigation}) =>{

        // Set the Default State
        this.state = { age: 18 }

        getVal = (val) => {
          console.warn(val);
         }
        onChange = (v) => {

          this.setState({val:Math.round(v)});
          console.log(this.state );
        }

        return(
          <View >
          <Slider
               minimumValue = {0}
               maximumValue = {50} 
               value={this.state.age}
               onValueChange={val => this.setState({ age: val })}
               onSlidingComplete={ val => this.getVal(val)}

            />
            <Text>  {this.state.age}</Text>

            <Button 
              style = {{margin:50,backgroundColor:'black'}}
              title="Slow"
            />
            <Button 
              style = {{margin:50,backgroundColor:'black'}}
              title="Medium"
            />
            <Button 
              style = {{margin:50,backgroundColor:'black'}}
              title="Fast"
            />
          </View>
          );
    }

【问题讨论】：

标签： javascript react-native react-native-android arrow-functions

【解决方案1】：

您的 Speed 组件是一个 stateless 函数，请尝试通过扩展 Component 类来重写它。

class Speed extends Component {
    constructor() {
        super();
        this.state = { age: 18 }
        this.getVal = this.getVal.bind(this);
        this.onChange = this.onChange.bind(this);
    }
        // Set the Default State

    getVal(val) {
        console.warn(val);
    }
    onChange(v) {
        this.setState({ val: Math.round(v) });
        console.log(this.state);
    }
    render() {
        return (
            <View >
                <Slider
                    minimumValue={0}
                    maximumValue={50}
                    value={this.state.age}
                    onValueChange={val => this.setState({ age: val })}
                    onSlidingComplete={val => this.getVal(val)}

                />
                <Text>  {this.state.age}</Text>

                <Button
                    style={{ margin: 50, backgroundColor: 'black' }}
                    title="Slow"
                />
                <Button
                    style={{ margin: 50, backgroundColor: 'black' }}
                    title="Medium"
                />
                <Button
                    style={{ margin: 50, backgroundColor: 'black' }}
                    title="Fast"
                />
            </View>
        );
    }
}

【讨论】：