реагировать родное государство без класса - PullRequest
Новая
       30

реагировать родное государство без класса

0 голосов
/ 01 октября 2019

Я новичок, чтобы реагировать на родной язык, и я пытаюсь обновить значение ползунка в пользовательском интерфейсе при его перемещении. Я видел в этом примере , что они используют состояние , но у меня нет класса. У меня есть компонент. Это мой код: 

export const PhaseModeDetailComponent = ({
  phase,
  editable,
  onChange,
  sliderValue
}: {
  phase: IPhase;
  editable: boolean;
  onChange?: (phase: IPhase) => void;
  sliderValue: number;
}) => {
    let leftIcon;
    let rightIcon;
    let minimumTrackTintColor;
    let maximumTrackTintColor;
    let minValue;
    let maxValue;
    let sliderStep;

    if (phase.oven_mode === 0) {
      leftIcon = open;
      rightIcon = closed;
      minimumTrackTintColor = Colors.bluish;
      maximumTrackTintColor = Colors.tomato;
      minValue = 0;
      maxValue = 100;
      sliderStep = 10;
    } else if (phase.oven_mode === 1) {
      leftIcon = convectionSmallCopy;
      rightIcon = steamSmallCopy;
      minimumTrackTintColor = Colors.white;
      maximumTrackTintColor = Colors.tomato;
      minValue = 10;
      maxValue = 90;
      sliderStep = 5;
    }

    return (
      <ImageBackground style={styles.container} source={combinedShape} resizeMode="stretch">
        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
          <Image style={styles.sliderIcons} source={leftIcon} resizeMode="contain" />
          <Slider
            style={{ height: '100%', flex: 1 }}
            minimumValue={minValue}
            maximumValue={maxValue}
            minimumTrackTintColor={minimumTrackTintColor}
            maximumTrackTintColor={maximumTrackTintColor}
            thumbTintColor="#fff"
            thumbImage={handle}
            disabled={!editable}
            step={sliderStep}
            value={phase.humidity_perc}
          />
          <Image style={styles.sliderIcons} source={rightIcon} resizeMode="contain" />
        </View>
        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
          <ScalableText
            style={{
              flex: 1,
              textAlign: 'right',
              paddingRight: 8,
              color: Colors.white,
              fontFamily: 'robotoRegular',
              fontSize: 22
            }}
          >
            {`${phase.humidity_perc}%`}
          </ScalableText>
        </View>
      </ImageBackground>
    );
  }
};

Как мне обновить значение ползунка? В примере они используют состояние, но я прочитал здесь , что я не могу его использовать, так как у меня нет класса. Есть ли другой способ? Спасибо

1 Ответ

0 голосов
/ 02 октября 2019

React имеет функцию под названием hooks, которая именно то, что вы ищете. Вы можете использовать состояние внутри компонента функции.

Подробнее об этом в документах .

Вот пример, взятый прямо из документов: 

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Я бы порекомендовал узнать о различии между компонентами класса и функциональными компонентами, и начинать с того, что вам больше подходит.

Использование компонента класса для того же примера выше выглядело бы примерно так: 

import React, { Component } from 'react';

class Example extends Component {

  state = {
    count: 0
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1})}>Click me</button>
      </div>     
    )
  }

}
...