将数组映射到按钮元素时应该如何使用 onPress？

Question

如果我要映射一个数组并且每个数组都应该是一个按钮，我将如何设计 onPress 函数，因为按钮的数量会因用户而异？

我目前有 3 个使用反应本机元素的按钮，每个按钮都有一个常规样式、一个禁用样式和一个禁用属性（true 或 false）。我有 3 个状态（初始状态为 false），每个按钮一个。每个按钮都有一个 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>
   )
}

Answer 1

您可以使用 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>
    )
}

将数组映射到按钮元素时应该如何使用 onPress？

How should I use onPress when mapping an array to a button element?

javascript

arrays

mapping

function

react-native