If you want to use a TextInput component to handle multiple values, you can achieve this by maintaining an object in your component state to store these values. Here’s an example where each key in the object represents a different input field:
jsxCopy code
import React, { useState } from 'react'; import { View, TextInput, Button, StyleSheet } from 'react-native'; const MultiValueTextInput = () => { const [inputValues, setInputValues] = useState({ firstName: '', lastName: '', email: '', }); const handleInputChange = (key, value) => { setInputValues((prevValues) => ({ ...prevValues, [key]: value, })); }; const handleSubmit = () => { // Do something with inputValues, such as sending it to a server or performing other logic console.log('Submitted values:', inputValues); }; return ( <View style={styles.container}> <TextInput style={styles.input} placeholder="First Name" value={inputValues.firstName} onChangeText={(text) => handleInputChange('firstName', text)} /> <TextInput style={styles.input} placeholder="Last Name" value={inputValues.lastName} onChangeText={(text) => handleInputChange('lastName', text)} /> <TextInput style={styles.input} placeholder="Email" value={inputValues.email} onChangeText={(text) => handleInputChange('email', text)} keyboardType="email-address" /> <Button title="Submit" onPress={handleSubmit} /> </View> ); }; const styles = StyleSheet.create({ container: { padding: 16, }, input: { height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 12, paddingLeft: 8, }, }); export default MultiValueTextInput;
In this example:
- The state
inputValuesis an object with keys representing different input fields (e.g., firstName, lastName, email). - The
handleInputChangefunction is used to update the corresponding key in the state when the text changes in theTextInput. - Each
TextInputis associated with a specific key in the state, making it easy to manage and retrieve the values.
You can customize this example based on your specific use case and add more input fields as needed.