React中如何检测点击的是哪个SearchInput组件？

你可以通过以下几种简单方式区分点击的是哪个组件：

方式一：给组件传递专属标识参数 #

给每个SearchInput添加一个标识字段（比如type），在组件内部触发操作时把这个标识传递回父组件：

父组件代码修改： #

<SearchInput 
  label={'Cerca Azienda'} 
  type="company"
  company={company} 
  users={users} 
  setSearchResults={setSearchResults} 
/>

<SearchInput 
  label={'Cerca Utente'} 
  type="user"
  company={company} 
  users={users} 
  setSearchResults={setSearchResults} 
/>

SearchInput组件内部处理： #

const SearchInput = ({ label, type, setSearchResults, ...rest }) => {
  const handleClick = () => {
    // 把标识type和搜索结果一起传递，父组件就能区分来源
    setSearchResults({
      results: /* 你的搜索结果数据 */,
      source: type
    });
    // 或者如果是单纯的点击事件，也可以单独触发回调告知父组件
  };

  return (
    <div onClick={handleClick}>
      <label>{label}</label>
      {/* 输入框及其他组件内容 */}
    </div>
  );
};

方式二：绑定不同的点击回调函数 #

在父组件里为每个SearchInput定义独立的点击处理函数，直接传递给组件：

父组件代码： #

// 公司搜索组件的点击处理
const handleCompanySearch = () => {
  console.log("点击了公司搜索组件");
  // 这里执行公司数据过滤逻辑
  setSearchResults(/* 公司搜索结果 */);
};

// 用户搜索组件的点击处理
const handleUserSearch = () => {
  console.log("点击了用户搜索组件");
  // 这里执行用户数据过滤逻辑
  setSearchResults(/* 用户搜索结果 */);
};

// 渲染组件
<SearchInput 
  label={'Cerca Azienda'} 
  company={company} 
  users={users} 
  onClick={handleCompanySearch}
/>

<SearchInput 
  label={'Cerca Utente'} 
  company={company} 
  users={users} 
  onClick={handleUserSearch}
/>

SearchInput组件接收回调： #

const SearchInput = ({ label, onClick, ...rest }) => {
  return (
    <div onClick={onClick}>
      <label>{label}</label>
      {/* 输入框及其他组件内容 */}
    </div>
  );
};

方式三：利用HTML自定义属性（data-*） #

给组件根元素添加自定义data-*属性，通过事件对象获取标识：

父组件代码： #

<SearchInput 
  label={'Cerca Azienda'} 
  data-search-type="company"
  company={company} 
  users={users} 
  setSearchResults={setSearchResults} 
/>

<SearchInput 
  label={'Cerca Utente'} 
  data-search-type="user"
  company={company} 
  users={users} 
  setSearchResults={setSearchResults} 
/>

SearchInput组件内部获取标识： #

const SearchInput = ({ label, setSearchResults, ...rest }) => {
  const handleClick = (e) => {
    // 从事件对象的currentTarget获取自定义属性值
    const searchType = e.currentTarget.dataset.searchType;
    console.log(`点击了${searchType}搜索组件`);
    // 后续执行对应的数据过滤逻辑
  };

  return (
    <div onClick={handleClick} {...rest}>
      <label>{label}</label>
      {/* 输入框及其他组件内容 */}
    </div>
  );
};

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