Question

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

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

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

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

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

每次初始化该类时，内容都不会被删除，因为它总是会占用前一个实例。

希望有所帮助！

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

2 个答案: