Question

我有点卡在这里想要一个textinput，最后一个值被设置为占位符

和一个按钮，

将文本设置为占位符变量
清除文字输入文字
并将输入中的文本提供给其他函数

到目前为止我的代码：

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*/}
};

编辑07.06.2018 16:39

感谢Shubhanu Sharma这个问题大部分已经完成，但是dtere还是有点纠结

此刻的行为：

（为了最好的理解，简化了数值）

应用程序启动

值：

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

User2正在输入其凭据

值：

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

User2点击loginbutton

值：

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

User2使用app ....然后user2登出并再次显示登录屏幕

值：

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

（如果我重新启动整个应用程序，它会加载正确的占位符，但如果我只是在消失（导航到该屏幕），则不会）

期望的行为

应用程序启动

值：

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

User2正在输入其凭据

值：

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

User2点击loginbutton

值：

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

User2使用app ....然后user2登出并再次显示登录屏幕

值：

 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>
    );
  }
}

带有变量占位符的Textinput和按钮上的清除

编辑07.06.2018 16:39

此刻的行为：

期望的行为

1 个答案: