Javascript 如何将此.setState更改传递给父级

我是新手，我正在制作一个示例应用程序，用户可以登录并注册一个新帐户

我有两门课

一个是主类index.ios.js，另一个是register.js。在索引类中，我是说如果变量寄存器为true，则呈现寄存器屏幕

在类register.js中，我试图使用此.setState（{register:false}）将变量register设置为false，但它不会导致父对象（index.ios.js）的重新呈现。这个方法是超级（状态）方法还是我缺少的类似方法？我相信父状态没有得到更新的寄存器变量的值

以下是我的课程：

在index.ios.js内部渲染：

render: function() {
    if(this.state.register) {
      return this.renderRegisterScreen();
    }
    else if (this.state.loggedIn) {
      return this.userLoggedIn();
    }
    else {
      return this.renderLoginScreen();
    }
  }

Register.js：

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  TextInput,
} = React;

var Register = React.createClass({
        render: function() {
        return (
          <View style={styles.container}>
            <View style={styles.rafitoImage}>
              <Image source={require('./logo.png')}></Image>
              <Text style={styles.slogan}>Eliminate the need to wait!</Text>
            </View>
            <View style={styles.bottomSection}>
              <View style={styles.username}>
                <View style={styles.inputBorder}>
                  <TextInput placeholder="Username..." style={styles.usernameInput} onChangeText={(text) => this.setState({username: text})}/>
                </View>
                <View style={styles.inputBorder}>
                  <TextInput password={true} placeholder="Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({password: text})}/>
                </View>
                <View style={styles.inputBorder}>
                  <TextInput password={true} placeholder="Verify Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({verifyPassword: text})}/>
                </View>
                <View style={styles.inputBorder}>
                  <TextInput placeholder="Phone.." style={styles.usernameInput} onChangeText={(text) => this.setState({phone: text})}/>
                </View>
                <View style={styles.inputBorder}>
                  <TextInput placeholder="Email.." style={styles.usernameInput} onChangeText={(text) => this.setState({email: text})}/>
                </View>
                <TouchableHighlight style={styles.button}
                  underlayColor='#f1c40f' onPress={this.register}>
                        <Text style={styles.buttonText}>Register</Text>
                </TouchableHighlight>
                <TouchableHighlight style={styles.signUp} onPress={this.resetToLogin}
                underlayColor='#ffffff'>
                <Text style={styles.signUpText}>Already A Member </Text>
                </TouchableHighlight>
              </View>
            </View>
            <View style={styles.copyright}>
            </View>
          </View>
        );
    },

    resetToLogin: function() {
        this.setState({
            register: false //I want this to re render the home screen with the variable register as false
        });
    }
});

    var styles = StyleSheet.create({
      container: {
        flex : 1
      },
      bottomSection: {
        flex: 5,
        flexDirection: 'row' 
      },
      button: {
            height: 36,
            backgroundColor: '#32c5d2',
            justifyContent: 'center',
            marginTop: 20
        },
      buttonText: {
            fontSize: 18,
            color: 'white',
            alignSelf: 'center'
      },
      signUpText: {
        color: '#3598dc'
      },
      signUp: {
        alignItems: 'flex-end',
        marginTop: 10,
      },
      username: {
        flex: 1,
        padding: 5
      },
      rafitoImage: {
        flex: 3,
        justifyContent: 'center',
        alignItems: 'center',
      },
      copyright: {
        alignItems: 'center'
      },
      usernameInput: {
            height: 36,
            marginTop: 10,
            marginBottom: 10,
            fontSize: 18,
            padding: 5
      },
      copyrightText: {
        color: '#cccccc',
        fontSize: 12
      },
      inputBorder: {
        borderBottomWidth: 1,
        borderBottomColor: '#ececec'
      },
      slogan: {
        color: '#3598dc'
      }
    });

module.exports = Register;

var React=require（'React-native'）；
变量{
评估学，
样式表，
文本，
看法
形象,，
触控高光，
文本输入，
}=反应；
变量寄存器=React.createClass({
render:function（）{
返回(
不需要等待！
this.setState（{username:text}）}/>
this.setState（{password:text}）}/>
this.setState（{verifyPassword:text}）}/>
this.setState（{phone:text}）}/>
this.setState（{email:text}）}/>
登记
已经是会员了
);
},
resetToLogin:function（）{
这是我的国家({
register:false//我希望它重新呈现主屏幕，变量register为false
});
}
});
var styles=StyleSheet.create({
容器：{
弹性：1
},
底部部分：{
弹性：5，
flexDirection:“行”
},
按钮：{
身高：36，
背景颜色：“#32c5d2”，
为内容辩护：“中心”，
玛金托普：20
},
按钮文字：{
尺码：18，
颜色：'白色'，
自我定位：“中心”
},
登录文本：{
颜色：“3598dc”
},
报名：{
对齐项目：“柔性端”，
玛金托普：10，
},
用户名：{
弹性：1，
填充：5
},
rafitoImage：{
弹性：3，
为内容辩护：“中心”，
对齐项目：“居中”，
},
版权所有：{
对齐项目：“中心”
},
用户名输入：{
身高：36，
玛金托普：10，
marginBottom:10，
尺码：18，
填充：5
},
版权文本：{
颜色：“#中交”，
字体大小：12
},
输入边框：{
边界宽度：1，
borderBottomColor:“#ececec”
},
口号:{
颜色：“3598dc”
}
});
module.exports=寄存器；

尝试1

根据答案，我将其添加到index.ios.js中

renderRegisterScreen: function() {
    return (
      <Register login={this.login}/>
    )
  }

renderRegisterScreen:函数（）{
返回(
)
}

我把这个添加到我的register.js

<TouchableHighlight style={styles.signUp} onPress={this.props.login}
                underlayColor='#ffffff'>
                <Text style={styles.signUpText}>Already A Member </Text>
                </TouchableHighlight>

已经是会员了

但由于某些原因，它甚至不再进入注册屏幕，它会在注册屏幕呈现时立即执行登录功能。我现在错过了什么？请告知

谢谢

更新

当我登记为财产时，它起作用，但当我不登记时，它不起作用。我想知道为什么如果有人可以张贴

---

谢谢

您可以将函数作为道具传递给孩子，然后以这种方式在孩子内部设置家长的状态

父组件：

   var Parent = React.createClass({

    getInitialState() {
        return {
            registered: false
        }
    },

  register(){
    console.log("logging in... ");
    this.setState({
        registered: true
    });

  },

  render: function() {
    return (
      <View style={styles.container}>
        <Child register={this.register.bind(this)} registered={this.state.registered} />
      {this.state.registered && <View style={{padding:10, backgroundColor:'white', marginTop:10}}>
                                    <Text style={{fontSize:20}}>Congratulations, you are now registered!</Text>
                              </View>}
       </View>
    );
  }
});

var Child = React.createClass({

render: function() {
return(
    <View style={{backgroundColor: 'red', paddingBottom:20, paddingTop:20 }}>
        <TouchableHighlight style={{padding:20, color: 'white', backgroundColor: 'black'}} onPress={() => this.props.register() }>
 {this.props.registered ? <Text style={{color: 'white'}}>registered</Text> : <Text style={{color: 'white'}}>register</Text>}
        </TouchableHighlight>                     
    </View>
    ) 
  }
})

var Parent=React.createClass({
getInitialState（）{
返回{
注册：假
}
},
寄存器（）{
console.log（“登录…”）；
这是我的国家({
注册：对
});
},
render:function（）{
返回(
{this.state.registered&&
恭喜你，你现在已经注册了！
}
);
}
});

子组件：

   var Parent = React.createClass({

    getInitialState() {
        return {
            registered: false
        }
    },

  register(){
    console.log("logging in... ");
    this.setState({
        registered: true
    });

  },

  render: function() {
    return (
      <View style={styles.container}>
        <Child register={this.register.bind(this)} registered={this.state.registered} />
      {this.state.registered && <View style={{padding:10, backgroundColor:'white', marginTop:10}}>
                                    <Text style={{fontSize:20}}>Congratulations, you are now registered!</Text>
                              </View>}
       </View>
    );
  }
});

var Child = React.createClass({

render: function() {
return(
    <View style={{backgroundColor: 'red', paddingBottom:20, paddingTop:20 }}>
        <TouchableHighlight style={{padding:20, color: 'white', backgroundColor: 'black'}} onPress={() => this.props.register() }>
 {this.props.registered ? <Text style={{color: 'white'}}>registered</Text> : <Text style={{color: 'white'}}>register</Text>}
        </TouchableHighlight>                     
    </View>
    ) 
  }
})

var Child=React.createClass({
render:function（）{
返回(
this.props.register（）}>
{this.props.registed？registed:register}
) 
}
})

我尝试失败的原因是因为我正在使用

onPress={this.props.login}

应该是

onPress={()=>this.props.login}

---

由于这个错误，我的onPress函数将在按钮渲染时立即执行。我不知道为什么会这样，但我知道我的错误是什么

这里有一个更强大的解决方案。这将允许子组件更改父组件中的任何状态变量

父组件：

render: function() {
    return (
       ...
        <Child setParentState={newState=>this.setState(newState)} />
       ...
    );
}

this.props.setParentState({registered: true})

---

使用

StackNavigator

我找到了一个利用

screenProps

的解决方案。在这里，您可以将函数和值传递给路由。应用程序全局状态在

App

中管理<代码>应用程序然后将函数和/或状态传递给

导航组件

屏幕道具

。然后，

StackNavigator

中的每个子路由都可以通过

this.props.screenProps进行访问

这个解决方案目前运行良好。希望您能提供一些反馈或建议，以改进此方法

class HomeScreen extends React.Component {

  render() {
    return (
      <View>
        <Text>{JSON.stringify(this.props.screenProps.awesome)}</Text>
        <Button
          onPress={() => this.props.screenProps.updateGlobalState("data")}
          title="Update parent State"
        />
      </View>
    );
  }
}

const NavComponent = StackNavigator({
  Home: { screen: HomeScreen },
  // AllOthers: { screen: AllComponentsHereMayAccessScreenProps },
});

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      everythingIsAwesome: false,
    }
  }

  _updateGlobalState(payload) {
    console.log('updating global state: ', payload);
    this.setState({everythingIsAwesome: payload});
  }

  render() {
    return <NavComponent screenProps={{
      updateGlobalState: this._updateGlobalState.bind(this),
      awesome: this.state.everythingIsAwesome
    }} />;
  }
}

类主屏幕扩展React.Component{
render（）{
返回(
{JSON.stringify（this.props.screenProps.awesome）}
this.props.screenProps.updateGlobalState（“数据”）}
title=“更新父状态”
/>
);
}
}
const NavComponent=StackNavigator({
主屏幕：{屏幕：主屏幕