（我是一個完全的初學者，所以我只是想了解反應）我創建了一個文本輸入和用戶名/設定用戶名狀態，我想將其保存在不同的組件螢屏中。由于某種原因我無法讓它作業，我已經洗掉了我所有的嘗試，只是發布了當前的代碼，有人可以指導我嗎？
開始.js
const [username, setUsername] = useState("")
const changeHandler = (val) => {
setUsername(val)}
const buttonPress = ()=> {
console.log(username)
navigation.navigate("Main")}
return (
<SafeAreaView style={styles.container}>
<Text style={styles.text}>Enter name here</Text>
<View style={styles.textinputarea}>
<TextInput
style={styles.textinput}
placeholder="Name here"
maxLength = {12}
onChangeText = {changeHandler}
/>
<TouchableOpacity onPress={buttonPress}>
<Ionicons name="checkmark-circle" size={40} color="white"/>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
這是Profile.js中的部分，當“用戶”在 Start.js 中提交他們的名字時，我想在其中更新狀態
<TouchableOpacity>
<Title style={styles.text}>Hello {username}!</Title>
</TouchableOpacity>
uj5u.com熱心網友回復：
為了管理和傳遞變數，你可以做很多事情。
假設您使用的是 React 導航庫，我認為推薦的做法是使用導航引數。
將用戶名傳遞到您正在導航的螢屏上：
navigation.navigate("Main", { username )
獲取它并在“主”螢屏中將其作為路由讀取（來自道具，或者您可以使用 useRoute 鉤子）
const {username} = route.params;
更多關于導航引數 - https://reactnavigation.org/docs/params/#what-should-be-in-params
DustInCompetent 已經提到的另一種方法是將狀態保存在一個組件中，它位于螢屏上方（設定和獲取變數的位置）。
代碼示例：
const [username, setUsername] = useState("")
return (
<View>
<Component1 username={username} setUsername={setUsername} />
<Component2 username={username} setUsername={setUsername} />
</View>
);
但是，如果您使用導航結構（如 react-navigation），我不會推薦這種方法，因為您不會在不中斷延遲加載的情況下將變數傳遞到螢屏，您通常傳遞的唯一內容是組件。在某種情況下，當您想要跨多個螢屏和具有背景關系的組件管理變數時會有所幫助。它有助于解決傳遞變數的問題，但請記住，如果您擴展到多個背景關系，最好使用 Redux、Recoil 或其他狀態管理工具。更多關于背景關系的資訊可以在 React 檔案中找到：https : //reactjs.org/docs/context.html
代碼示例（App.js）：
return (
<YourContext>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen ... />
<Stack.Screen ... />
</Stack.Navigator>
</NavigationContainer>
</YourContext>
);
背景關系檔案（Context.js）：
import React, { createContext, useContext, useState } from 'react';
const UsernameContext = createContext();
export const UsernameProvider = ({ children }) => {
const [username, setUsername] = useState();
return (
<UsernameContext.Provider
value={{
username,
setUsername,
}}
>
{children}
</UsernameContext.Provider>
);
};
export const useUsernameProvider = () => useContext(UsernameContext);
export default UsernameContext;
然后您可以在您需要的每個螢屏/組件中匯入和使用背景關系，例如：
const { username, setUsername } = useUsernameProvider();
uj5u.com熱心網友回復：
這篇文章是關于在沒有任何復雜的 React Context/Redux 技術的情況下在不同組件之間共享狀態。所以很適合初學者！簡短而翔實。
您將需要一個組件來負責呈現 Start 和 Profile 組件。比方說，一個 App.js 或任何其他組件（ Layout.js ）。
移動
const [username, setUsername] = useState("")
到 Layout.js / App.js，并將其作為道具傳遞，例如
<Start username={ username } setUsername={ setUsername } />
還將value prop傳遞給 TextInput 組件。
因此，由 onChangeText 更新的狀態實際上會更新輸入的值。不僅是狀態變數，還有組件。
<TextInput
value={ username }
style={styles.textinput}
placeholder="Name here"
maxLength = {12}
onChangeText = {changeHandler}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/355951.html
標籤：javascript 反应 反应原生