有条件的 onChange 功能不起作用答案

【问题标题】：Conditional for onChange function not working有条件的 onChange 功能不起作用
【发布时间】：2019-08-13 20:39:58
【问题描述】：

我是一名 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>
    );
  }
}

【问题讨论】：

标签： javascript react-native ecmascript-6

【解决方案1】：

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

这是我的代码

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"
  }
});

See The App Preview

【讨论】：

这太棒了！非常感谢！ :-)

【解决方案2】：

条件语句可以对您调用this.setState [1] 的方式进行一些调整。 setState 的更新版本采用一个函数，该函数获取整个应用程序状态并返回要合并的状态 - 您当前的实现在隐藏进入 onChange 处理程序的更改值方面存在一些问题。但是根据您所描述的，我认为您应该能够使用更简单的stateChange 版本的setState，它只返回一个对象以合并到组件状态。也可以多次调用setState，批量更新。

onChange = (value: number) => {
    // update state.value to the value from the SizeSelector
    this.setState({value});
    // conditionally change the color
    // this setState will get batched with the above if it executes
    if (value === 2) {
       this.setState({color: 'red'});
    }
  };

[1]https://reactjs.org/docs/react-component.html#setstate

【讨论】：

【解决方案3】：

您可以为状态添加颜色：

state: State = {
  value: InitialValue,
  color: 'blue'
};

然后根据条件改变onChange函数：

onChange = (value: number) => {
  this.setState({ value })
  if (value===2) {
    this.setState({ color: 'red' })
  }

最后根据state.color 更改CircleSizeSelector 组件的样式。我不知道它会是什么样子，但大概是这样的：

currentValueCircleStyle = { { backgroundColor: this.state.color } }

【讨论】：