【问题标题】:Redirect after form submit React Native表单提交后重定向 React Native
【发布时间】:2020-05-28 18:17:55
【问题描述】:

我有一个简单的连接表单,我希望我的用户在连接后被重定向到我的主页。 我的表单中的action 似乎不起作用,因为发送表单后 URL 没有改变。

这是我的Login class 在我的Login.tsx 文件中的内容

constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    }
  }

  handleSubmit() {
    const email = this.state.email;
    console.log(email);
    const password = this.state.password;
    console.log(password);
    axios.post("http://snapi.epitech.eu/connection", { email, password } 
        ).then(reponse => {
            console.log('connect', reponse);
        }).catch(error => {
            console.log('error', error);
    });

}

  render() {
    //const { dataSource, fromFetch, fromAxios, loading, axiosData } = this.state
    return (
    <View style={styles.container}>
      <Text>Connection</Text>
      <form onSubmit={ this.handleSubmit }
            action="localhost:19006/home">
        <label>email</label>
        <TextInput 
          //name="email"
          style={styles.input}
          value={ this.state.email } 
          onChangeText={ email => this.setState({email}) } 
          //onChange={val => this.onChange('email', val)}
        />
        <label>password</label>
        <TextInput 
          style={styles.input}
          secureTextEntry={true}
          value={ this.state.password } 
          onChangeText={ password => this.setState({password}) } 
          //onChange={val => this.onChange('password', val)}
        />
        <Button title="Inscription" 
          type="submit"
          onPress={this.handleSubmit.bind(this)}
        />
      </form> 
    </View>
  );
  }
};

【问题讨论】:

    标签: javascript reactjs react-native redirect


    【解决方案1】:

    你需要像下面这样使用 react 原生导航:

    import { NavigationActions } from 'react-navigation';
    const routeName = "Home" // string e.g 'Home'
    const params = {         // object (key value pair)
         key1: value1,
         key2: value2
    }
    NavigationActions.navigate({ routeName, params }),
    
    or
    
    this.props.navigation.navigate(routeName, params)
    
    

    【讨论】:

    • 我在尝试第二种方法时遇到了这个错误_this2.props.navigation is undefined
    • 您是否将所有屏幕添加到某个导航器,如 StackNavigator 或 DrawerNavigator、SwitchNavigator?在执行这些操作之前,您需要设置导航器。 :xD
    • 如果您完全不熟悉,请参考这个。 freecodecamp.org/news/introducing-react-navigation-5
    猜你喜欢
    • 1970-01-01
    • 2013-04-13
    • 1970-01-01
    • 2020-09-12
    • 2013-08-06
    相关资源
    最近更新 更多