React Native中如何判断哪个按钮被点击？

针对你的需求，有几种简单直接的方式可以区分点击的按钮，实现对应状态的更新：

方法1：给点击事件传递标识符 #

直接在onPress调用时传入区分按钮的参数（比如索引、名称），在handlePress里根据参数判断执行逻辑：

import { useState, View, Button } from 'react-native';

const YourComponent = () => {
  const [titleOne, setTitleOne] = useState('A button 1');
  const [titleTwo, setTitleTwo] = useState('A button 2');

  const handlePress = (buttonId) => {
    if (buttonId === 1) {
      setTitleOne('Button 1 clicked');
    } else if (buttonId === 2) {
      setTitleTwo('Button 2 clicked');
    }
  };

  return (
    <View>
      <Button title={titleOne} onPress={() => handlePress(1)} />
      <Button title={titleTwo} onPress={() => handlePress(2)} />
    </View>
  );
};

export default YourComponent;

方法2：使用独立的处理函数 #

如果逻辑简单，给每个按钮绑定单独的处理函数，代码会更直观：

import { useState, View, Button } from 'react-native';

const YourComponent = () => {
  const [titleOne, setTitleOne] = useState('A button 1');
  const [titleTwo, setTitleTwo] = useState('A button 2');

  const handleButtonOnePress = () => {
    setTitleOne('Button 1 clicked');
  };

  const handleButtonTwoPress = () => {
    setTitleTwo('Button 2 clicked');
  };

  return (
    <View>
      <Button title={titleOne} onPress={handleButtonOnePress} />
      <Button title={titleTwo} onPress={handleButtonTwoPress} />
    </View>
  );
};

export default YourComponent;

方法3：用对象统一管理状态（适合按钮较多的场景） #

如果后续按钮数量增加，可以把状态合并成一个对象，通过键名区分，让代码更简洁：

import { useState, View, Button } from 'react-native';

const YourComponent = () => {
  const [buttonTitles, setButtonTitles] = useState({
    button1: 'A button 1',
    button2: 'A button 2'
  });

  const handlePress = (buttonKey) => {
    setButtonTitles(prev => ({
      ...prev,
      [buttonKey]: `${buttonKey} clicked`
    }));
  };

  return (
    <View>
      <Button title={buttonTitles.button1} onPress={() => handlePress('button1')} />
      <Button title={buttonTitles.button2} onPress={() => handlePress('button2')} />
    </View>
  );
};

export default YourComponent;

注意：React Native的Button组件不支持Web端HTML按钮的自定义data-*属性，所以上面的几种方式是最常用的实现方案。

内容的提问来源于stack exchange，提问作者Experiment