如何在 React Native 上僅使用一個 onChange 處理多個文本輸入?例如:姓名、年齡、國籍、眼睛顏色。
另外,如何只用一個按鈕保存所有輸入?(我想在同一個“專案”中輸出一個包含所有這些輸入的串列)
uj5u.com熱心網友回復:
您可以管理一個物件中的所有狀態。例如:
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;
uj5u.com熱心網友回復:
創建一個新函式并對復制的物件進行更改并將新物件推送到狀態
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}
/>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/391042.html
上一篇:無法在python中修改全域變數
下一篇:Tkinter按鈕未顯示所需文本
