Ввод текста с переменной Placeholder и очистка по нажатию кнопки

Question

Я немного застрял здесь, желая иметь текстовый ввод с последним зафиксированным значением, установленным в качестве заполнителя

и кнопку, которая

• устанавливает текст в переменную заполнителя
• очищает текстовый ввод текста
• и передает текст из ввода в какую-то другую функцию

мой код:

export default class FirstScreen extends Component{
  state = {
  'Username': ''
}   
componentDidMount = () => AsyncStorage.getItem('Username').then((value) => 
this.setState({ 'Username': value }))

setUsername = (value) => {
 AsyncStorage.setItem('Username', value);
 this.setState({ 'Username': value });
}


// initialize empty text for textinputs
 constructor(props) {
 super(props);
   this.state = {text: '',text2: ''};
 }

  render(){
    return(



 {/*some ohther code*/}



  <TextInput
      placeholder= {this.state.Username}
      onChangeText={(value) => this.setState({text: value})}
      //onFocus={({text}) => this.setUsername(text)}
      value={this.state.text}
      style={{ width: 200, height: 44, padding: 8 }}
    />

      <Button
        title={"Login"}
        onPress={this.clearAndLogin}
        color="rgb(0, 38, 100)"
       />




clearAndLogin= () => {
  this.props.navigation.navigate('Home');
  {/*I gave up on other code here because nothing worked*/}
};

edit07.06.2018 16: 39

благодаря Шубхану Шарма проблема в основном решена, но немного осталось немного

поведения на данный момент:

(значения просто указаны для лучшего понимания)

1. Запускается приложение

   Значения:

    Asyncstorage-value: "user1"
    Placeholder-value: "user1" (Placeholder loaded correctly from AS)
    Usertextinput-value: ""
   

2. Пользователь2 печатаетего учетные данные

   Значения:

    Asyncstorage-Value: "user1"
    Placeholder-value: "user1"
    Usertextinput: "user2"
   

3. Пользователь2 нажимает кнопку входа в систему

   Значения:

    Asyncstorage-Value: "user2"
    Placeholder-value: "user1"
    Usertextinput: ""
   

4. User2 использует приложение .... и после этого user2 выходит из системы и снова показывает экран входа в систему

   Значения:

    Asyncstorage-Value: "user2"
    Placeholder-value: "user1" (here ist the mistake, should be "user2")
    Usertextinput: ""
   

(если я перезапущуВ целом приложение будет загружать правильную метку-заполнитель, но не в том случае, если я просто выхожу (перейдите к этому экрану))

желаемое поведение

1. Приложение запускается

   Значения:

    Asyncstorage-value: "user1"
    Placeholder-value: "user1" (Placeholder loaded correctly from AS)
    Usertextinput-value: ""
   

2. Пользователь2 вводит свои учетные данные

   Значения:

    Asyncstorage-Value: "user1"
    Placeholder-value: "user1"
    Usertextinput: "user2"
   

3. Пользователь2 нажимает кнопку входа в систему

   Значения:

    Asyncstorage-Value: "user2"
    Placeholder-value: "user2"
    Usertextinput: ""
   

4. Пользователь2 использует приложение .... и после этого пользователь2 выходит из системы и снова показывает экран входа в систему

   Значения:

    Asyncstorage-Value: "user2"
    Placeholder-value: "user2" (!!!!)
    Usertextinput: ""
   

Я надеюсь, теперь это стало более понятным, спасибо всем !!

Answer 1

это работает для меня.

Я предполагаю, что вы вызовете API, который даст вам ответ с успехом или неавторизованным, в зависимости от того, что мы установим значение в хранилище.

У меня естьВ данном примере с использованием axios вы можете использовать что-нибудь или какую-то другую логику.

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  TextInput,
  AsyncStorage
} from "react-native";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { placeholder: "", Username: "" };
  }

  componentDidMount = async () => {
    const lastName = await AsyncStorage.getItem("Username");
    if (lastName) {
      this.setState({ placeholder: lastName });
    }
  };

  setUsername = value => {
    AsyncStorage.setItem("Username", value);
    this.setState({ Username: value });
  };
  // initialize empty text for textinputs
  clearAndLogin = () => {
    axios
      .get("url", { params: { username: this.state.username, password: "" } })
      .then(res => {
        if (res.code === 200) {
          AsyncStorage.setItem("Username", this.state.Username);
          this.setState(
            {
              Username: ""
            },
            () => {
              // change route
            }
          );
        } else {
          alert("unauthorized user");
        }
      });
  };
  render() {
    return (
      <View>
        <TextInput
          placeholder={this.state.placeholder || "first time user"}
          onChangeText={Username => this.setState({ Username })}
          value={this.state.Username}
          style={{ width: 200, height: 44, padding: 8 }}
        />
        <Button
          title={"Login"}
          onPress={this.clearAndLogin}
          color="rgb(0, 38, 100)"
        />
      </View>
    );
  }
}