如何使React Antive TextInput在更改屏幕后保持文本

Question

我正在制作一个应用程序，其中包含一个注释字段，该字段需要在屏幕更改后保持其输入，但是在离开页面后始终将其重置。这是我的状态构造函数：

this.state = {text: ""};

和我的TextInput声明：

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

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

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

Answer 2

是因为当您在某些类型的导航中离开页面时，您会触发" componentunmount"，并且回来时会被销毁和重建。

您必须将数据存储在组件类中。例如，在其他课程中。一个只有一个实例的课程

...
let instance = null;
class OtherClass {
  constructor() {
    if(instance) {
      return instance;
    }
    instance = this;
  }
...
}

因此，当您的用户制作输入时，将内容保存在"其他班级"中，然后每次重建父部件时，您都会使用以前存储在此处的数据设置值。

每次您初始化该类内容时，内容都不会删除，因为它始终将使用上一个实例。

希望它有帮助！