通过 onClick 事件从映射数组中获取选定的值 id

Question

我有一个应用程序，您可以在其中搜索特定公司，呈现的结果会向您显示他们的员工。

我的目标：能够点击员工姓名并通过点击事件将该数据传递给另一个组件，目前，我只是想隔离该值。

我的问题：当我搜索一家拥有多名员工的公司时，我会在 consol.log 中获取所有员工的数据，而不是我点击的数据。例如，如果我搜索“Target”，我的结果是“Jane and Kerk，当我点击 Jane 时，我的控制台应该是“Jane”，而不是 Jane and Kerk

这里是the code

上下文

import React, { useState, createContext } from "react";

export const ContextInfo = createContext();

export const InfoProvider = (props) => {
  const [address, setAddress] = useState([
    {
      id: 1,
      company: "Target",
      employee: "Jane"
    },
    {
      id: 2,
      company: "Value Right",
      employee: "George"
    },
    {
      id: 3,
      company: "Target",
      employee: "Kerk"
    }
  ]);

  return (
    <>
      <ContextInfo.Provider value={[address, setAddress]}>
        {props.children}
      </ContextInfo.Provider>
    </>
  );
};

info.js - 地图所在位置

import Container from "react-bootstrap/Container";

const Info = ({ fltr }) => {
  const testMe = (result, id) => {
    console.log(result.employee);
  };
  return (
    <>
      <Container className="pl-1 pr-1 mt-4">
        <h3>General Information</h3>

        {fltr.map((result, id) => (
          <>
            <ul style={{ margin: "0.1rem" }}>
              <li key={result.id}>
                <a href="#" onClick={testMe(result)}>
                  <h5>{result.employee}</h5>
                </a>
              </li>
            </ul>
          </>
        ))}
      </Container>
    </>
  );
};
export default Info;

Answer 1

问题是点击功能的范围：正确的版本是：

< a href="#" onClick={ ()=> { testMe(result); } } >
  < h5> { result.employee }< /h5>
< /a>

完整代码

import Container from "react-bootstrap/Container";

const Info = ({ fltr }) => {
  const testMe = (result, id) => {
    console.log(result.employee);
  };
  return (
    <>
      <Container className="pl-1 pr-1 mt-4">
        <h3>General Information</h3>

        {fltr.map((result, id) => (
          <>
            <ul style={{ margin: "0.1rem" }}>
              <li key={result.id}>
                <a
                  href="#"
                  onClick={() => {
                    testMe(result);
                  }}
                >
                  <h5>{result.employee}</h5>
                </a>
              </li>
            </ul>
          </>
        ))}
      </Container>
      {/* <div className="d-flex justify-content-center mt-1">
        <Button href="/main" className={style["container-exit-btn"]}>Exit Account</Button>
      </div> */}
    </>
  );
};
export default Info;

通过 onClick 事件从映射数组中获取选定的值 id

Get selected value id, from a mapped array via onClick event

arrays

onclick

reactjs