如果我正在映射一個陣列并且每個陣列都應該是一個按鈕，那么我將如何設計 onPress 函式，因為按鈕的數量會因用戶而異？
我目前有 3 個使用 react native 元素的按鈕，每個按鈕都有一個常規樣式、一個禁用樣式和一個禁用屬性（true 或 false）。我有 3 個狀態（假為初始狀態）每個按鈕一個。每個按鈕都有一個 onPress，用于設定每個狀態。我按下的那個是真的，其余的都是假的。如何將其應用于未知數量的按鈕？
當前代碼：
//fetched data:
const names : [{name: Bob, age: 20},{name: Lisa, age: 26}, {name: Tom, age: 24}, ...];
const [button1, setButton1] = useState(false);
const [button2, setButton2] = useState(false);
const [button3, setButton3] = useState(false);
const [clickedName, setClickedName] = useState("");
const btn1sel = () => {
setButton1(true);
setButton2(false);
setButton3(false);
setClickedName("Bob");
};
const btn2sel = () => {
setButton1(false);
setButton2(true);
setButton3(false);
setClickedName("Lisa");
};
const btn3sel = () => {
setButton1(false);
setButton2(false);
setButton3(true);
setClickedName("Tom");
};
const App = () => {
return(
<View>
<Button style={styles.btn} disabledStyle={styles.btnD} disabled={button1} onPress={btn1sel1} />
<Button style={styles.btn} disabledStyle={styles.btnD} disabled={button2} onPress={btn1sel2} />
<Button style={styles.btn} disabledStyle={styles.btnD} disabled={button3} onPress={btn1sel3} />
<Text>{clickedName}</Text>
</View>
)
}
uj5u.com熱心網友回復：
您可以使用 useState 鉤子來存盤您的陣列并像這樣更新它：
const [names, setNames] = React.useState([{ name: 'Bob', age: 20, disabled: false }, { name: 'Lisa', age: 26, disabled: false }, { name: 'Tom', age: 24, disabled: false }])
const btn = (item, index) => {
const arr = [...names]
for(let i = 0; i < arr.length;i ){
arr[i].disabled = false
}
arr[index].disabled = true
setClickedName(item.name)
setNames(arr)
};
const App = () => {
return (
<View>
{names.map((item, index) => {
<Button style={styles.btn} disabledStyle={styles.btnD} disabled={item.disabled} onPress={() => btn(item, index)} />
})}
<Text>{clickedName}</Text>
</View>
)
}
uj5u.com熱心網友回復：
通過陣列映射以創建按鈕并使用 useState 來獲取選定的陣列物件值。
例如：
const arr = [1, 2, 3] //dummy array
const App = () => {
const [selected, setSelected] = useState()
return (
<View>
{arr.map((item, index)) => (
<View key={index.toString()}>
<Button {item !== selected ? disabled : null} onPress={()=> setSelcted(item)}>Select</Button>
</View>
)}
</View>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/330892.html
標籤：javascript 数组 反应原生 功能 映射