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

【问题标题】：How do I manage multiple user inputs with only one onChange in React Native?如何在 React Native 中只使用一个 onChange 来管理多个用户输入？
【发布时间】：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 函数吗？
是的！我将在此处添加我的代码以举例说明

标签： react-native button onchange textinput

【解决方案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}
    />

【讨论】：