Как изменить свойство компонента в функции? - PullRequest
Новая
       38

Как изменить свойство компонента в функции?

1 голос
/ 20 июня 2019

Я пытаюсь научиться реагировать и как использовать сторонние компоненты, сейчас я пытаюсь использовать компонент, который я установил с https://www.npmjs.com/package/react-native-countdown-component

Цель:

Компонент Countdown имеет «Props» под названием «running», который я хотел бы изменить, когда я «нажимаю» на компонент.

код:

код, который я использую, это просто новое приложение, созданное с использованием «expo init MyApp», затем я вставил в код код для импорта и создания компонента 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>

      <CountDown
        until={60}
        size={30}
        //onFinish={() => alert('Finished')}
        digitStyle={{backgroundColor: '#FFF'}}
        digitTxtStyle={{color: '#1CC625'}}
        timeToShow={['M', 'S']}
        timeLabels={{m: '', s: ''}}
        showSeparator={true}      
        onPress={() =>
          {
            this.setState({running:true});
          }}
          running={false}
        />
    </View>
  );
}

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

Как правильно изменить свойство «running» компонента Countdown при щелчке по компоненту?

Ответы [ 2 ]

2 голосов
/ 20 июня 2019

Вы можете начать использовать состояние правильно. На этот раз я буду использовать React Hooks, это проще, чем использование традиционных функциональных или классовых компонентов. Подробнее

Каждый раз, когда состояние обновляется, компонент будет перерисовываться с новым значением. 

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';

export default function App() {
  const [isRunning, setRunning] = useState(false) //React Hooks
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <CountDown
        until={60}
        size={30}
        //onFinish={() => alert('Finished')}
        digitStyle={{backgroundColor: '#FFF'}}
        digitTxtStyle={{color: '#1CC625'}}
        timeToShow={['M', 'S']}
        timeLabels={{m: '', s: ''}}
        showSeparator={true}      
        //When component is pressed, updates state to true
        onPress={() => { setRunning(true); }}
        running={isRunning} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
0 голосов
/ 20 июня 2019

Я нашел другой способ, который требует нового класса, но я предпочитаю ответ Яна Стебана Васко.

Решение, которое я нашел, состояло в том, чтобы создать новый компонент, который будет содержать «состояние» для компонента Обратного отсчетазатем используйте компонент MyCountdown в методе main вместо прямого использования компонента Countdown 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';
export default class MyCountdown extends React.Component{
    state = {
        running: false
    };
    handleOnPress = () =>{
        this.setState({running:!this.state.running});
    }
    render(){
        return (
            <CountDown
                until={60}
                size={30}
                //onFinish={() => alert('Finished')}
                digitStyle={{backgroundColor: '#FFF'}}
                digitTxtStyle={{color: '#1CC625'}}
                timeToShow={['M', 'S']}
                timeLabels={{m: '', s: ''}}
                showSeparator={true}      
                onPress={this.handleOnPress}
                running={this.state.running}
              />
        );
    }
}
...