求助,关于textInput和fetch实现登录的问题



  • 请问我想要做一个登录界面,和后台交互,不知道这样行不行的通,第一次做登录界面,请赐教?

    <View style={{backgroundColor:'#fff',flex:1}}>
              <View style={styles.row}>
                <Text style={styles.label}>用户名</Text>
                <TextInput style={styles.input} underlineColorAndroid={'transparent'}
                 placeholder="请输入" placeholderTextColor='gray'
                 onChangeText = {(newText) => this.updateName(newText)} />
              </View>
    
              <View style={styles.row}>
                <Text style={styles.label}>密码</Text>
                <TextInput style={styles.input} secureTextEntry={true} underlineColorAndroid={'transparent'}
                 placeholder="请输入" placeholderTextColor='gray'
                 onChangeText = {(newText) => this.updatePass(newText)} />
              </View>
              <View style={{marginTop:30, alignItems:'center', justifyContent:'center'}}>
                 <TouchableOpacity onPress={this._login.bind(this)}>
                   <View style={styles.btn}>
                     <Text style={{fontSize:20, color: '#fff'}}>登录</Text>
                   </View>
                 </TouchableOpacity>
             </View>
    
          </View>
        )
      }
      _login(){
              var classes = "http://121.41.33.67:8080/HousingService/api/appointment/login";
                  fetch(classes,{
                      method:'POST',
                      headers:{
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                      },
                      body:JSON.stringify({
                        loginUserName:this.state.loginUserName,
                        loginIndex_password:this.state.loginIndex_password,
                        }),
                  })
                  .then((response) => if(response){
                        this.props.navigator.push({
                            name: "lten",
                            component: lten,
                        });
                  } else {
                    alert("用户名或者密码错误!");
                  })
            }
    


  • 我写的跟你的写法不一样,也是刚学不久,获取登录账号和密码,我的写法是this.refs.userName.props.value,然后将获取的账号和密码拼接到api上,fetch返回的response为success(不同api返回不一样,可能为true可能为1,看你们自己的设置)就可以跳转了,



  • 能贴一下你的代码吗?我的这个一直报错行不通



  • _fetchData = ()=> {
    fetch(URL+'?loginid='+this.refs.userName.props.value+'&'+'password='+this.refs.password.props.value)
    .then((response) => response.json())
    .then((responseData) => {
    this._goHomePage(responseData);
    }).done();
    }

    _goHomePage(responseData){
    if(responseData.loginchek=='1'){//这里我们的api返回的是1,表示验证ok
    this.props.navigator.push({
    //这里实现跳转登录
    });

    这里贴一个账号的textinput:

    <TextInput style={styles.style_user_input}
    placeholder='社员号'
    ref='userName'
    numberOfLines={1}
    underlineColorAndroid={'transparent'}
    textAlign='left'
    onChangeText = {(val)=>this.setState({userName: val})}
    value={ this.state.userName } />