为什么onclick事件运行 2个不同的函数

Question

我正在尝试通过单击代码中的 Modify2 或 Edit2 来运行一个函数。它运行一直是用 onClick 定义的函数，然后又是 showCard

列出部分负载
Select 列表的一个条目，它将运行 showCard 并加载该项目。
点击 Edit2 或 Modify2 触发 showConn 并立即再次显示 showCard

它应该只是触发 showConn ！

为什么运行在 showConn 之后立即显示 showCard？

感谢您的任何建议。

代码：

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

function App() {
  const [list, setList] = useState(true);
  const [card, setCard] = useState(false);
  const [netconn, setNetconn] = useState(false);
  const [networks, setNetworks] = useState([]);
  const [network, setNetwork] = useState({});

  useEffect(() => {
    fetch(window.location.protocol+"//"+window.location.hostname+":3001/networks/list")
      .then((response) => response.json())
      .then((responseJson) => {
        setNetworks(responseJson.data);
      });
  }, []);

  let showCard = (id) => {
    console.log( "Show Card");
    fetch(window.location.protocol+`//`+window.location.hostname+`:3001/networks/${id}`)
      .then((response) => response.json())
      .then((responseJson) => {
        setNetwork(responseJson.data);
        setList(false);
        setNetconn(false);
        setCard(true);
      });
  };
  
  let showConn = (id) => {
    console.log( "Show Connection");
    setList(false);
    setCard(false);
    setNetconn(true);
  };
  let showList = () => {
    setCard(false);
    setNetconn(false);
    setList(true);
  };
  const handleSubmit = (event) => {
    event.preventDefault();
  }
  const handleGetconn = (event,id) => {
    event.preventDefault();
    alert(id);
    showConn(id)
  }
  return (
    <div className="container">
      {netconn ? (
        <div className="row">
          <div className="col-auto">
            <div
              onClick={() => showCard(network._id)} 
              className="btn btn-primary">Submit</div> 
            <div 
              onClick={() => showList()}
              className="btn btn-default">Cancel</div>
          </div>
        </div>
      ) : null}
      {list ? (
        <div className="list-group">
          {networks.map((network) => (
            <li
              key={network._id}
              onClick={() => showCard(network._id)}
              className="list-group-item list-group-item-action">
              {network.name}
            </li>
          ))}
        </div>
      ) : null}
      {card ? (
        <div className="row">
          <div className="col-auto">
            <div 
              onClick={(e) => handleGetconn(e,network._id)} 
              className="btn btn-success">
              Modify2
            </div>
            <div onClick={() => showConn(network._id)} className="btn btn-primary">
              Edit2
            </div>
            <div onClick={() => showList()} className="btn btn-default">
              Back
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default App;

更新代码并添加 () => 到它丢失的 onclick 标签

Answer 1

您在此处的每个渲染上调用函数 showCard：

onClick={showCard(network._id)}

在上面的代码摘录中，onClick 属性值是在每次渲染时调用的函数调用的 return 值。

<li> 元素正确设置了 onClick 属性。

onClick={() => showCard(network._id)}

此处，onClick 属性值是对单击事件时调用的函数的引用。

为什么onclick事件运行 2个不同的函数

Why is the onclick event running 2 different functions

javascript

onclick

reactjs