React中Redux数据映射组件的onClick事件无响应问题排查

It sounds like you’re correctly fetching and rendering your Redux data, but the click event isn’t firing because your custom JobContainer component isn’t forwarding the onClick prop to an underlying native DOM element. Let’s walk through the fixes:

1. Make sure JobContainer passes the onClick prop to a native element #

Custom React components don’t automatically pass props like onClick to their children unless you explicitly handle them. If JobContainer is a component you’ve created, you need to accept the onClick prop and attach it to a native DOM element (like a <div> or <button>) inside it.

For example, if your JobContainer currently looks like this:

const JobContainer = ({ children }) => {
  return <div className="job-container">{children}</div>;
};

Update it to include the onClick prop (use the rest operator ...props to pass through all unhandled props):

const JobContainer = ({ children, ...props }) => {
  return <div className="job-container" {...props}>{children}</div>;
};

Or explicitly pass the onClick if you only need that specific prop:

const JobContainer = ({ children, onClick }) => {
  return <div className="job-container" onClick={onClick}>{children}</div>;
};

2. Alternative: Attach the onClick directly to the text element #

If modifying JobContainer isn’t an option, move the onClick event to the JobSearchTypography component instead (assuming it forwards the prop to a native element):

const SearchResultsText = ({ text }) => {
  console.log(text)
  return (
    <JobContainer>
      <JobSearchTypography onClick={() => console.log(text)}>
        {text}
      </JobSearchTypography>
    </JobContainer>
  );
};

3. Check for CSS pointer-events issues #

Double-check that neither JobContainer nor JobSearchTypography has CSS styles like pointer-events: none applied—this would block click events from registering entirely.

After making these changes, clicking on "Data Analyst" should log the text to your console as expected!

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