Блог

Как обновить значение textinput в react native. Я создаю приложение для создания заметок, в котором я получаю значение из хранилища asynchoronus. И я хочу отредактировать это значение note, которое я принимаю за значение по умолчанию. Я хочу обновить значение в хранилище с помощью textinput. Мой код приведен ниже. Пожалуйста, дайте правильный ответ. Спасибо.

 import React, { useState } from 'react';
import { StyleSheet, Text, View,TextInput } from 'react-native';
import { FAB,IconButton } from 'react-native-paper';
import Header from './Header.js';
import AsyncStorage from '@react-native-community/async-storage';

export default function EditNotes({navigation}) {
    const [noteTitle, setNoteTitle] = useState('')
    const [noteDescription, setNoteDescription] = useState('')
    const [noteTitlenew, setNoteTitlenew] = useState('')
    const [noteDescriptionnew, setNoteDescriptionnew] = useState('')

    getValueFunction = () => {
        //function to get the value from AsyncStorage
        AsyncStorage.getItem('onetitle').then(value =>
          //AsyncStorage returns a promise so adding a callback to get the value
          setNoteTitle(value)
        );
        AsyncStorage.getItem('onedesc').then(value =>
          //AsyncStorage returns a promise so adding a callback to get the value
          setNoteDescription(value)
        );
      };

  return (
    <>
    <Header titleText = 'Edit Note' />
      <View style={styles.container}>
          {getValueFunction()}
        <TextInput
           placeholder = "Add Note Title here"
           defaultValue = {noteTitle}
           value = {noteTitlenew}
           onChangeText = {setNoteTitlenew}
           style = {styles.title}
        />
        <TextInput
            placeholder = "Add Note Description"
            defaultValue = {noteDescription}
            value = {noteDescriptionnew}
            onChangeText = {setNoteDescriptionnew}
            multiline={true}
            style={styles.text}
            scrollEnabled={true}
            returnKeyLabel='done'
            blurOnSubmit={true}
        />
        <FAB
        style={styles.fab}
        small
        icon='check'
        />
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop:20,
    paddingHorizontal:10
  },
  title:{
      fontSize:24,
      marginBottom:16,
      borderWidth:1,
      padding:15
  },
  text: {
      fontSize:16,
      borderWidth:1,
      padding:15
  },
  fab:{
      position:'absolute',
      margin:20,
      right:20,
      bottom:0,
  }
});
  

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

 import React, { useState } from 'react';
import { StyleSheet, Text, View,TextInput } from 'react-native';
import { FAB,IconButton } from 'react-native-paper';
import Header from './Header.js';
import AsyncStorage from '@react-native-community/async-storage';

export default function EditNotes({navigation}) {
    const [noteTitle, setNoteTitle] = useState('')
    const [noteDescription, setNoteDescription] = useState('')

    getValueFunction = () => {
        //function to get the value from AsyncStorage
        AsyncStorage.getItem('onetitle').then(value =>
          //AsyncStorage returns a promise so adding a callback to get the value
          setNoteTitle(value)
        );
        AsyncStorage.getItem('onedesc').then(value =>
          //AsyncStorage returns a promise so adding a callback to get the value
          setNoteDescription(value)
        );
      };

  return (
    <>
    <Header titleText = 'Edit Note' />
      <View style={styles.container}>
          {getValueFunction()}
        <TextInput
           placeholder = "Add Note Title here"
           defaultValue = {noteTitle}
           value = {noteTitle}
           onChangeText = {setNoteTitle}
           style = {styles.title}
        />
        <TextInput
            placeholder = "Add Note Description"
            defaultValue = {noteDescription}
            value = {noteDescription}
            onChangeText = {setNoteDescription}
            multiline={true}
            style={styles.text}
            scrollEnabled={true}
            returnKeyLabel='done'
            blurOnSubmit={true}
        />
        <FAB
        style={styles.fab}
        small
        icon='check'
        />
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop:20,
    paddingHorizontal:10
  },
  title:{
      fontSize:24,
      marginBottom:16,
      borderWidth:1,
      padding:15
  },
  text: {
      fontSize:16,
      borderWidth:1,
      padding:15
  },
  fab:{
      position:'absolute',
      margin:20,
      right:20,
      bottom:0,
  }
});
  

Перед использованием react native внимательно прочитайте документацию react native.

О вашем коде вам не нужно два состояния для обновленного и начального значения, и вы можете передать значение по умолчанию в useState и вызвать его.