Question

现在，我试图让包含某些列表的屏幕知道其他屏幕的状态。

主屏幕包含一些表单组件，用户可以在其中输入文本。在其他屏幕上，“表单组件”包含一些TextInput表单。

如果用户以某种形式输入了一些文本，然后该用户放置了后退按钮或保存按钮，那么我想将这些表单组件的主屏幕状态更改为“编辑”，“不编辑”或“完成”。

如何在主屏幕上更改每个表单组件的状态？

此图片是主屏幕。请注意红色字符。如果用户在其他屏幕上的表单中输入一些文本，则会发生变化。

这是一个输入屏幕

  handleOnpress() {
const db = firebase.firestore();
const { currentUser } = firebase.auth();
db.collection(`users/${currentUser.uid}/form1`).add({
  form1 : [
    { fullname: this.state.fullname },
    { middleName: this.state.middleName },
    { reason: this.state.reason },
    { birthPlaceCity: this.state.birthPlaceCity },
    { birthPlaceCountry: this.state.birthPlaceCountry },
    { Citizinchip: this.state.Citizinchip },
    { aboutMaridge: this.state.aboutMaridge },
    { fromTermOfMaridge: this.state.fromTermOfMaridge },
    { ToTermOfMaridge: this.state.ToTermOfMaridge },
    { nameOfSpouse: this.state.nameOfSpouse },
    { birthdateOfSpouse: this.state.birthdateOfSpouse },
    { fromTermOfExMaridge: this.state.fromTermOfExMaridge },
    { ToTermOfExMaridge: this.state.ToTermOfExMaridge },
    { nameOfExSpouse: this.state.nameOfExSpouse },
    { birthdateOfExSpouse: this.state.birthdateOfExSpouse }]

 })
  .then(() => {
    this.props.navigation.goBack();
  })
  .catch((error) => {
    console.log(error);
  });
}

render() {
  return (
    <ScrollView style={styles.container}>
      <InfoHeader navigation={this.props.navigation}>申請者情報１ 
      </InfoHeader>
      <Notes />
      <QuestionTextSet onChangeText={(text) => { this.setState({ 
        fullname: text }); }} placeholder={'例：留学太郎'}>姓名（漢字表記） 
      </QuestionTextSet>
      <QuestionTextSet onChangeText={(text) => { this.setState({ 
        middleName: text }); }}>本名以外に旧姓・通称名(通名)・別名など他の名前が 
        あればローマ字で記入</QuestionTextSet>
      <QuestionTextSet onChangeText={(text) => { this.setState({ 
        reason: text }); }} placeholder={'例：結婚・離婚/ご両親の離婚のためな 
        ど'}>別名がある方はその理由</QuestionTextSet>
      <SubmitButton style={styles.saveButton} onPress= 
       {this.handleOnpress.bind(this)}>保存</SubmitButton>

       <Copyrights />

     </ScrollView>
   );

这是主屏幕。

class WHApply extends React.Component {
  render() {
   return (
     <ScrollView style={styles.container}>
      <WHApplyBar navigation={this.props.navigation} />
      <WHApplyIndexBar />
      <HWApplyMailBar />
      <HWApplyList navigation={this.props.navigation} />
      <Agreement />
      <SubmitButton>同意して送信</SubmitButton>
      <Logout />
      <Copyrights />
    </ScrollView>
  );
 }
}

这是HWApplyList的代码。此组件将导入到主屏幕。

  class HWApplyList extends React.Component {
    state = {
       fontLoaded: false,
    }

    async componentWillMount() {
     await Font.loadAsync({
     FontAwesome: fontAwesome,
   });

   this.setState({ fontLoaded: true });
  }

  render() {
   return (

    <View style={styles.container}>

    <TouchableOpacity onPress={() => { 
     this.props.navigation.navigate('PersonalInfo1'); }} >
      <View style={styles.listBox}>
        <Text style={styles.listBoxText}>
            申請者情報１
        </Text>
        <View style={styles.inputBotton}>
          <Text style={styles.inputBottonText}>未入力</Text>
        </View>

        <View style={{ flex: 1, justifyContent: 'center' }}>
          {
            this.state.fontLoaded ? (
              <View style={styles.navigationButton}>
                <Text style={styles.navigationButtonIcon}>{'\uf0da'} 
        </Text>
              </View>
            ) : null
         }
        </View>
      </View>
    </TouchableOpacity>

Answer 1

React就是关于在应用程序的数据流中向下流动的数据。因此，如果您有两个处于同一级别的组件，然后需要共享状态，则正确的解决方案是将它们包装在一个父组件中，该父组件将获取所有必需的数据并通过props

分发给它的子组件

Answer 2

除了上一个答案，您还需要将处理函数传递给屏幕孩子。此句柄功能将使您的子屏幕可以修改父级的状态。

类似

onChange(value) {
  this.setState({value});    
}
render() {
  return (
    <Screen1 value={this.state.value} onChange={this.onChange}/>
    <Screen2 value={this.state.value}/>
  )
}

Answer 3

当您开始制作许多使用彼此状态的组件时，使用“ redux”之类的工具将使其变得更加容易。而不是将数据（就是要与其他组件共享数据）置于特定的组件状态。您可以为整个应用创建通用状态，并且可以从任何组件访问此状态。

这是一篇好文章： Understanding Redux: The World’s Easiest Guide to Beginning Redux

如何让一个屏幕知道其他屏幕的状态

3 个答案: