从另一个组件读取组件状态

对于本机开发，我很新颖。我做了一些研究，但没有得到我想要实现的工作。我的* .js文件有两个组件。一个是星级评定的组件。另一个包含基本视图。在视图内我添加了一个按钮。我想要发生的是当用户点击按钮时，来自文本框（alredy working）的输入和当前评分被收集以通过电子邮件发送。从另一个组件读取组件状态

问题： 1）这只能通过实现flux模式/使用redux来实现吗？ 2）如果是：是否所有的redux组件（actions，reducer，store）都必须在不同的文件中吐出？ 3）如果否：如何？

这里是我当前的代码：

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    TextInput, 
    View 
} from 'react-native'; 
import StarRating from 'react-native-star-rating'; 
import Button from 'react-native-button'; 
import {Actions} from 'react-native-router-flux'; 

export class GeneralStarExample extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     starCount: 4 
    }; 
    } 

    onStarRatingPress(rating) { 
    this.setState({ 
     starCount: rating 
    }); 
    } 

    render() { 
    return (
     <StarRating 
     disabled={false} 
     maxStars={5} 
     rating={this.state.starCount} 
     selectedStar={(rating) => this.onStarRatingPress(rating)} 
     starColor={'gold'} 
     emptyStarColor={'gold'} 
     /> 
    ); 
    } 
} 

export default class FeedbackView extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { text: 'Useless Placeholder' }; 
    } 

    render() { 
    return(

     <View style={styles.container}> 
     <GeneralStarExample onUserInput={this.handleUserInput}/> 
     <View style ={styles.textinput}> 
     <TextInput 
      style={{height: 240, width: 300, alignSelf: 'center', borderColor: 'gray', borderWidth: 1}} 
      onChangeText={(text) => this.setState({text})} 
      value={this.state.text} 
      /> 
     </View> 
     <Button onPress={() => Actions.refresh({text: this.state.text, rating: this.props.rating})}>Senden</Button> 
     <Text>{this.props.text}</Text> 
     <Text>{this.props.rating}</Text> 
     </View> 
    ) 
    } 
} 

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

非常感谢， Defrian

来源

2016-09-15 Defrian

你不需要Flux/Redux来做任何事情 - 这是肯定的:)他们是完全可选的。 – EugZol

1）你不一定需要实现终极版或任何助焊剂式的建筑风格，但它是一个非常好的方法我的想法是。 Redux将帮助您保持代码清洁和可扩展性。

2）当然你可以把所有这些放在一个文件中。你的减速器和行动基本上只是功能。至于商店，您只需从redux模块拨打电话createStore()即可。

来源

2016-09-16 13:25:54 George

从另一个组件读取组件状态

回答

相关问题