无状态函数中的 React OnClick 不起作用答案

【问题标题】：React OnClick inside stateless function does not work无状态函数中的 React OnClick 不起作用
【发布时间】：2020-06-24 11:10:23
【问题描述】：

我正在使用 react-google-maps 制作带有显示 InfoWindows 的标记的地图，您可以在其中按下按钮将某些内容打印到控制台。我使用下面的代码，但是onClick没有执行该函数：

function Map() {

  const [selectedKalas, setSelectedKalas] = useState(null);
  const [data, setData] = useState({ hits: [] });

  function sendMergeRequest() {
    console.log("Sender merge request");
  };

  /* Fetching some data... */

   useEffect(() => {
    const fetchData = async () => {
      const result = await axios(database_url_coordinates);
      setData(result);
    };
    fetchData();
  }, []);

  return (
    <GoogleMap>
      {
        data.data.map(kalasobjekt => {
          if (kalasobjekt.username !== "admin" && kalasobjekt.kalas !== null) {
            return (
                  <Marker
                    key={kalasobjekt.kalas.id}
                    position={{
                      lat: parseFloat(kalasobjekt.kalas.lat),
                      lng: parseFloat(kalasobjekt.kalas.lng)
                    }}
                    onClick={() => {
                      setSelectedKalas(kalasobjekt);
                    }}
                  />
                )}
            );
          }
        }))
      }
      {selectedKalas && (
        <InfoWindow
          position={{
            lat: parseFloat(selectedKalas.kalas.lat),
            lng: parseFloat(selectedKalas.kalas.lng)
          }}
          onCloseClick={() => {
            setSelectedKalas(null);
          }}
        >
              <div>
                <h2>{selectedKalas.username}</h2>
                <p>Eier: {selectedKalas.kalas.fullName}</p>
                <p>Kapasitiet: {selectedKalas.kalas.capacity}</p>
                <div className="submitData">
                  <button onClick={sendMergeRequest}>
                    Merge hos {selectedKalas.username}!
                  </button>
                </div>
              </div>

        </InfoWindow>
      )}
    </GoogleMap>
  );
}

我一直在四处寻找并试图了解为什么这不起作用，但似乎找不到任何好的答案。希望

【问题讨论】：

您可以尝试在单击后记录 selectedKalas 的值吗？如下所示：useEffect(()=> {console.log(selectedKalas)},[selectedKalas])
试过 onClick={() => SendMergeRequest()} ？此外，最好的做法是给函数/方法以大写字母开头（约定是类，枚举以大写开头）。
刚刚注意到状态数据的初始值没有数据属性。它应该是 { hits: [], data:[] }
试过 onClick={() => sendMergeRequest()} （我改了名字）没用
还尝试记录 selectedKalas 的值。我写了 onClick={() => console.log(selectedKalas)}。但是控制台中什么也没有显示

标签： javascript reactjs react-google-maps

【解决方案1】：

试试这样的：

function Hello() {
    const handleClick = function handle(){
        alert('Btn is clicked');
    }

  return (
        <div>
            <button onClick={ handleClick }>Click Me</button>
        </div>
    )
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

工作fiddle

【讨论】：

【解决方案2】：

我认为将这个函数 SendMergeRequest 方法保留在函数 Map 之外应该可以工作。

示例：

function Map() {
// map code
}

function SendMergeRequest() {
  console.log("Sender merge request");
};

【讨论】：

我试过了，然后输入：<button onClick={() => sendMergeRequest()}>但没用