javascript - 有条件的 onChange 功能不起作用

问题描述

我是一名 RN 新手，我刚刚完成了一个教程，在该教程中我能够创建一个组件，您可以在其中选择一个数字，同时拖动圆圈。但是，现在我希望颜色在拖动时随每个不同的值/数字而变化。现在，我已经将它写成当值等于数字 2 时，它会变为红色。我最初的想法是在我的 onChange 函数中创建一个条件，但到目前为止还没有奏效。它根本不会破裂，但不会改变颜色。有人有什么建议吗？代码如下和我所做的图像。

import React, { Component } from "react";
import { StyleSheet, View, Text } from "react-native";
import CircleSizeSelector from "react-native-circle-size-selector";
type State = {
  value: number
};
const InitialValue = 1;
export default class CircleSize extends Component<void, State> {
    static navigationOptions = {
        title: "Question of the day",
        headerStyle: {
          backgroundColor: "#53b4e6"
        },
        headerTintColor: "#f6c945",
        headerTitleStyle: "bold"    
      };
  state: State = {
    value: InitialValue
  };
  onChange = (value: number) => {
    this.setState( value => {
      if (value === "number") {
        if (this.onChange.value === "2"){
        return { color: "red"};
        }
      }
    });
  };
  render() {
    return (
      <View style={styles.container}>
          <View>
              <Text style={styles.question}>On a scale from 1 to 10, how do you rank Sunday's episode?</Text>
          </View>
        <View style={styles.parent}>
          <CircleSizeSelector
            minValue={1}
            maxValue={10}
            initialValue={InitialValue}
            onChange={this.onChange}
          >
            <View>
              <Text style={styles.text}>{this.state.value}</Text>
            </View>
          </CircleSizeSelector>
        </View>
      </View>
    );
  }
}

标签： javascriptreact-nativeecmascript-6

为了在拖动时更改每个不同的值/数字，我定义了一个 Color 数组并根据 state 中设置的值选择 Color 。

这是我的代码

import CircleSizeSelector from "react-native-circle-size-selector";
import { StyleSheet, View, Text } from "react-native";
import React from "react";

const colors = [
  "#FF6633",
  "#FFB399",
  "#FF33FF",
  "#FFFF99",
  "#00B3E6",
  "#E6B333",
  "#3366E6",
  "#999966",
  "#99FF99",
  "#B34D4D"
];

export default class App extends React.Component {
  state = {
    value: 1
  };

  onChange = value => {
    this.setState({ value });
  };

  render() {
    const { value } = this.state;
    const backgroundColor = colors[value - 1];
    return (
      <View style={styles.container}>
        <CircleSizeSelector
          minValue={1}
          maxValue={10}
          initialValue={this.state.value}
          onChange={this.onChange}
          currentValueCircleStyle={{
            backgroundColor: backgroundColor
          }}
          resizingCurrentValueCircleStyle={{
            backgroundColor: backgroundColor
          }}
        >
          <Text>{this.state.value}</Text>
        </CircleSizeSelector>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  }
});

查看应用预览

javascript - 有条件的 onChange 功能不起作用

问题描述

解决方案

推荐阅读