如何在本机反应中更改默认值并使用 TextInput 中的新值进行更新答案

【问题标题】：How to change default value and update with new value in TextInput in react native如何在本机反应中更改默认值并使用 TextInput 中的新值进行更新
【发布时间】：2020-09-17 08:55:26
【问题描述】：

如何在 react native 中更新 textinput 的值。我正在做笔记应用程序，在其中我从异步存储中获得价值。我想编辑我作为默认值的注释值。我想使用 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,
  }
});

【问题讨论】：

“请给出正确答案”在这里听起来很糟糕。请考虑编辑您的问题。

标签： javascript android reactjs react-native asynchronous

【解决方案1】：

您不需要为默认值和值使用 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,
  }
});

【讨论】：

【解决方案2】：

在使用 react native 之前，请仔细阅读 react native 文档。

关于您的代码，您不希望更新和初始值需要两个状态，您可以在 useState 中传递您的默认值并调用它。

【讨论】：