Question

嗨，我正在React中构建一个前端，并且正在渲染从google maps api获取的地点列表。我希望每个地方在onClick上执行操作。如果我不传递任何值，则它起作用，如果我传递从道具获得的地方的ID，则在呈现列表项时导致错误的onClick被触发。这是列表组件

import {ListGroup} from "react-bootstrap";
import {useDispatch} from "react-redux";
import {selectedPlace} from "../../actions/searchActions";

const PlaceList=function (props) {
    const dispatch=useDispatch()

    const handleClick=function (id) {
        console.log('ciao '+id)
    }
    return(
        <ListGroup>
        {props.places.map(item=>{
            return (<ListGroup.Item variant="flush" onClick={handleClick(item['place_id'])}>{item['formatted_address']}</ListGroup.Item>)
        })}
        </ListGroup>
    )
}

export default PlaceList

我希望仅在单击列表项时才触发onClick。对解决方法有任何想法吗？

Answer 1

onClick函数应这样调用！

import { ListGroup } from "react-bootstrap";
import { useDispatch } from "react-redux";
import { selectedPlace } from "../../actions/searchActions";

const PlaceList = (props) => {
  const dispatch = useDispatch();

  const handleClick = (id) => {
    console.log('ciao ' + id)
  }
  return (
    <ListGroup>
      {
        props.places.map(item => {
          return (<ListGroup.Item variant="flush" onClick={() => handleClick(item['place_id'])}>{item['formatted_address']}</ListGroup.Item>)
        })
      }
    </ListGroup>
  )
}

export default PlaceList

Answer 2

您的onClick应该像这样调用函数：

import { ListGroup } from 'react-bootstrap';
import { useDispatch } from 'react-redux';
import { selectedPlace } from '../../actions/searchActions';

export default (props) => {
  const dispatch = useDispatch();

  const handleClick = (id) => {
    console.log('ciao ' + id);
  };

  return (
    <ListGroup>
      {props.places.map((item) => (
        <ListGroup.Item variant="flush" onClick={() => handleClick(item['place_id'])}>
          {item['formatted_address']}
        </ListGroup.Item>
      ))}
    </ListGroup>
  );
};

呈现组件时会触发onClick属性

2 个答案: