如何在 React Native 中只使用一个 onChange 来管理多个用户输入？

Posted 2023-02-22

【中文标题】如何在 React Native 中只使用一个 onChange 来管理多个用户输入？

【英文标题】：How do I manage multiple user inputs with only one onChange in React Native?

【发布时间】：2022-01-24 03:33:40

【问题描述】：

如何在 React Native 上仅使用一个 onChange 处理多个文本输入？ 例如： 姓名、年龄、国籍、眼睛颜色。

此外，如何只用一个按钮保存所有输入？ （我想在同一个“项目”中输出一个包含所有这些输入的列表）

这是我到目前为止所做的代码，我想制作一种电影日记，用户可以在其中注册他们想观看的新电影：（顺便说一句，我是一个初学者，所以我不确定大多数事情怎么做。我做这个项目是为了学习）

import React,  useState  from 'react';
import  Button, StyleSheet, View, Text, TextInput, ScrollView  from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const Registration = props => 

    const [enteredMovieName, setMovieName] = useState("");
    const [enteredSynopsis, setSynopsis] = useState("");
    const [enteredComments, setComments] = useState("");
    const [enteredSource, setSource] = useState("");

    const movieData = 
        Name: enteredMovieName,
        Synopsis: enteredSynopsis,
        Comments: enteredComments,
        Source: enteredSource,
    ;

    const movieDataHandler = () => 
        console.log(movieData);

    ;


    return (
        <ScrollView>
            <View>

                <View>
                    <Text style=styles.bodyHighlight>Add new movie</Text>
                </View>
                <ScrollView>
                    <View>
                        <Text style=styles.addMovie >Movie name:</Text>
                        <TextInput
                            placeholder='Cool Movie Name'
                            style=styles.inputContainer
                            onChangeText=enteredText => setMovieName(enteredText)
                            value=enteredMovieName

                        />
                        <Text style=styles.addMovie >Sinopsis:</Text>
                        <TextInput
                            placeholder='Amazing Synopsis'
                            style=styles.inputContainer
                            onChangeText=enteredText => setSynopsis(enteredText)
                            value=enteredSynopsis

                        />
                        <Text style=styles.addMovie >Comments (optional):</Text>
                        <TextInput
                            placeholder='Awesome Thoughts'
                            style=styles.inputContainer
                            onChangeText=enteredText => setComments(enteredText)
                            value=enteredComments

                        />
                        <Text style=styles.addMovie >Where to watch (optional):</Text>
                        <TextInput
                            placeholder='Super Useful Link'
                            style=styles.inputContainer
                            onChangeText=enteredText => setSource(enteredText)
                            value=enteredSource

                        />
                    </View>
                    <View>

                        <Button
                            style=styles.addMovie
                            title='ADD'
                            color='#a30b00'
                            onPress=movieDataHandler
                        />

                        <Button
                            style=styles.addMovie
                            title='SEE COMPLETE LIST'
                            color='#cd5c5c'
                            onPress=() => 
                                props.navigation.navigate('Items Screen');
                            
                        />

                    </View>
                </ScrollView>

            </View >
        </ScrollView>
    )


const styles = StyleSheet.create(
    bodyHighlight: 
        padding: 10,
        margin: 5,
        fontWeight: 'bold',
        fontSize: 25,
        textAlign: 'center',
        backgroundColor: '#C4BDBA'

    ,
    inputContainer: 
        borderColor: 'black',
        borderWidth: 2,
        width: 380,
        justifyContent: 'center',
        alignItems: 'center',
        marginHorizontal: 10,
        marginBottom: 5,

    ,
    addMovie: 
        padding: 10,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'stretch',
        marginHorizontal: 10,

    ,

)

export default Registration;

【问题讨论】：

你能举一个小代码例子来说明你的意思吗？当你的意思是“只有一个 onChange”时，你的意思是只有一个函数可以传递给每个文本输入的 onChange 函数吗？

是的！我将在此处添加我的代码以举例说明

【参考方案1】：

您可以管理对象中的所有状态。例如：

import React from 'react';
import 
  SafeAreaView,
  StyleSheet,
  TextInput,
  Button,
  Alert,
 from 'react-native';

const UselessTextInput = () => 
  const [user, setUserData] = React.useState( name: '', age: 0 );

  return (
    <SafeAreaView>
      <TextInput
        style=styles.input
        onChangeText=(text) => setUserData(...user, name: text )
        value=user.name
      />
      <TextInput
        style=styles.input
        onChangeText=(age) => setUserData(...user, age: age )
        value=user.age
      />
      <Button onPress=() => Alert.alert(`User name $user.name, age $user.age`) title="click me" />
    </SafeAreaView>
  );
;

const styles = StyleSheet.create(
  input: 
    height: 40,
    marginTop: 42,
    borderWidth: 1,
    padding: 10,
  ,
);

export default UselessTextInput;

【参考方案2】：

创建一个新函数并对复制的对象进行更改并将新对象推送到状态

const handleChange=(key,value)=>
  const myState = user
  myState[key] = value
  setUserData(myState)

然后将函数调用传递给onChangeTextprop

    <TextInput
      style=styles.input
      onChangeText=(text) => handleChange('name', text)
      value=user.name
    />