如何使 React Native TextInput 在屏幕更改后保留文本答案

【问题标题】：How to make React Native TextInput keep text after screen change如何使 React Native TextInput 在屏幕更改后保留文本
【发布时间】：2018-04-24 15:54:46
【问题描述】：

我正在制作一个包含备注字段的应用程序，该字段需要在屏幕更改后保留其输入，但在您离开页面后它总是会重置。这是我的状态构造函数：

this.state = {text: ""};

还有我的文本输入声明：

<TextInput
                    style={{
                        height: 200,
                        width: 250,
                        fontSize: 15,
                        backgroundColor: 'white',
                    }}

                    editable = {true}
                    multiline = {true}
                    numberofLines = {4}
                    onChangeText={(text) => this.setState({text})}
                    value={this.state.text}
                />

我一直在尝试找到一种方法将状态设置为在打开页面时不会重新初始化但到目前为止没有运气的变量。任何建议将不胜感激！

【问题讨论】：

标签： react-native textinput

【解决方案1】：

使用AsyncStorage 保存输入值。例如：

<TextInput
  style={{
    height: 200,
    width: 250,
    fontSize: 15,
    backgroundColor: 'white',
  }}
  editable = {true}
  multiline = {true}
  numberofLines = {4}
  onChangeText={(text) => { 
    this.setState({text});
    AsyncStorage.setItem('inputKey', text); // Note: persist input
  }}
  value={this.state.text}
 />

然后在 componentDidMount 中，您可以检查该值并相应地更新状态以使用旧值重新初始化。

componentDidMount() {
  AsyncStorage.getItem('inputKey').then((value) => {
    if (value !== null){
    // saved input is available
    this.setState({ text: value }); // Note: update state with last entered value
  }
  }).done();
}

【讨论】：

【解决方案2】：

这是因为当您以某种导航方式离开页面时，您会触发“componentUnmount”，当您返回时它会被销毁并重建。

您必须将数据存储在远离组件类的地方。例如在另一个班级。只有一个实例的类

...

let instance = null;

class OtherClass {
  constructor() {
    if(instance) {
      return instance;
    }

    instance = this;
  }
...
}

因此，当您的用户进行输入时，将内容保存在“OtherClass”中，然后每次重建父组件时，您都可以使用之前存储在此处的数据来设置值。

每次初始化该类时，内容都不会被擦除，因为它将始终采用前一个实例。

希望对您有所帮助！

【讨论】：