React-native 如何在另一個 javasript 文件中使用狀態值

Question

我想使用一個值，來自Step4.js 中的文件Step3.js，該值可以在用戶在Step3 中輸入后更改。 但是如何在 Step4 中使用這個值呢？

我已經嘗試了一些東西，但我想我錯過了這里的重點，所以希望有人能幫助我解決這個問題。

這是我的代碼：

應用程序.js：

 import React, { Component } from 'react' import { AppRegistry, StyleSheet, View, Text } from 'react-native' import { ViewPager } from 'rn-viewpager' import StepIndicator from 'react-native-step-indicator' import Step1 from "./Step1"; import Step2 from "./Step2"; import Step3 from "./Step3"; import Step4 from "./Step4"; const PAGES = [{id: 1, page: <Step1/>},{id: 2, page: <Step2/>}, {id: 3, page: <Step3/>}, {id: 4, page: <Step4/>}]; const firstIndicatorStyles = { stepIndicatorSize: 30, currentStepIndicatorSize: 40, separatorStrokeWidth: 5, currentStepStrokeWidth: 3, separatorFinishedColor: '#4aae4f', separatorUnFinishedColor: '#a4d4a5', stepIndicatorFinishedColor: '#4aae4f', stepIndicatorUnFinishedColor: '#a4d4a5', stepIndicatorCurrentColor: '#ffffff', stepIndicatorLabelFontSize: 15, currentStepIndicatorLabelFontSize: 15, stepIndicatorLabelCurrentColor: '#000000', stepIndicatorLabelFinishedColor: '#ffffff', stepIndicatorLabelUnFinishedColor: 'rgba(255,255,255,0.5)', labelColor: '#666666', labelSize: 12, currentStepLabelColor: '#4aae4f' }; export default class App extends Component { constructor (props) { super(props); this.state = { currentPosition: 0, stepCount: 4, } } componentWillReceiveProps (nextProps, nextState) { if (nextState.currentPosition != this.state.currentPosition) { if (this.viewPager) { this.viewPager.setPage(nextState.currentPosition) } } } render () { return ( <View style={styles.container}> <ViewPager style={{ flexGrow: 1 }} ref={viewPager => { this.viewPager = viewPager }} onPageSelected={page => { this.setState({ currentPosition: page.position }) }} > {PAGES.map(page => this.renderViewPagerPage(page))} </ViewPager> <View style={styles.stepIndicator}> <StepIndicator customStyles={firstIndicatorStyles} currentPosition={this.state.currentPosition} stepCount={this.state.stepCount} labels={['Kleur', 'Vorm', 'Moeite', 'Overzicht']} /> </View> </View> ) } renderViewPagerPage = (data) => { console.log(data); console.log(this.state.currentPosition); return ( <View key={data.id}> {data.page} </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#ffffff' }, stepIndicator: { marginVertical: 20 }, });

Step3.js：

 export function getSelected3() { return this.state.selected; } class Step3 extends Component { constructor(props){ super(props); this.state = { happy: { "id" : "1", "name" : "happy", "src" : require('../../assets/images/makkelijk.png') }, normal: { "id" : "2", "name" : "normal", "src" : require('../../assets/images/gemiddeld.png'), }, sad: { "id" : "3", "name" : "sad", "src" : require('../../assets/images/moeilijk.png'), }, selected: { "id" : "4", "name" : "", "src" : require('../../assets/images/moeilijk.png'), }, }; } onPress = (item) => { this.state.selected.name = item.name; this.state.selected.src = item.src; alert(this.state.selected.name); }; render() { return ( <View style={styles.container}> <View style={[styles.box]}> <TouchableHighlight onPress={() => this.onPress(this.state.happy)}> <Image style={styles.image} source={this.state.happy.src} /> </TouchableHighlight> </View> <View style={[styles.box]}> <TouchableHighlight onPress={() => this.onPress(this.state.normal)}> <Image style={styles.image} source={this.state.normal.src} /> </TouchableHighlight> </View> <View style={[styles.box]}> <TouchableHighlight onPress={() => this.onPress(this.state.sad)}> <Image style={styles.image} source={this.state.sad.src} /> </TouchableHighlight> </View> </View> ) } }

所以我想使用從Step3中選擇到Step4.js中的狀態的日期，我該怎么做？

Step4.js：

class Step4 extends Component {
constructor(props) {
    super(props);
    this.state = {
        value3: {
            "id": "3",
            "name" : "",
            "src" : "",
        },
    };
}

render() {

    let test = getSelected3();  
    this.state.value3.src = value3.src;
    return (
        <View style={styles.container}>
            <View style={[styles.box]}>
                <TouchableHighlight>
                    <Image
                        style={styles.image}
                        source={this.state.value3.src}
                    />
                </TouchableHighlight>
            </View>
            <View style={[styles.box]}>
                <TouchableHighlight>
                    <Image
                        style={styles.image}
                        source={this.state.value3.src}
                    />
                </TouchableHighlight>
            </View>
            <View style={[styles.box]}>
                <TouchableHighlight>
                    <Image
                        style={styles.image}
                        source={this.state.value3.src}
                    />
                </TouchableHighlight>
            </View>
        </View>
    )
}

Answer 1

建議您使 Step3 和 Step4 組件無狀態，它只會接收道具並創建一個組件 Stepper，它將渲染 Step3 和 Step4。 Stepper 組件將完成所有的狀態操作。

class Stepper extents Component {
    render() {
        const { state1, state2, state3, state4, onPress } = this.state;

        return [
            <Step3 state1={state1} state3={state3} onPress={onPress} />,
            <Step4 state2={state2} state4={state4}  />
        ];
    }
}

Step3 看起來像這樣：

const Step3 = ({ state1, state2, onPress }) => {
    return (<TouchableHighlight onPress={onPress}></TouchableHighlight);
};

希望你明白。

Answer 2

復制粘貼我在類似問題中的回答

我通常創建一個 global.js 包含：

module.exports = {
   step3State: null,
};

並獲取屏幕上狀態的值

render() {

GLOBAL.step3State = this;
//enter code here

}

現在你可以像這樣在任何地方使用它：

GLOBAL.step3State.setState({
    var: value
});

或者

Global.step3State.state.value