如何在反應組件中單擊按鈕時呼叫帶有引數的函式

這是我在腳本標記的 publics 檔案夾中的 index.html 中添加的帶有引數的函式

function displayContent(event, contentNameID) {

    let content = document.getElementsByClassName("contentClass");
    let totalCount = content.length;

    for (let count = 0; count < totalCount; count  ) {
        content[count].style.display = "none";
    }

    let links = document.getElementsByClassName("linkClass");
    totalLinks = links.length;
    for (let count = 0; count < totalLinks; count  ) {
        links[count].classList.remove("active");
    }

    document.getElementById(contentNameID).style.display = "block";
    event.currentTarget.classList.add("active");
}

嘗試通過單擊我的反應組件上的按鈕來呼叫此函式，如下所示

<button class="linkClass" onclick="displayContent(event, 'project2')">Meet at Campus
</button>

請用語法指導我

uj5u.com熱心網友回復：

這是正確的語法

<button className="linkClass" onClick={(event)=>displayContent(event,'project2')}>Meet at Campus</button>

編輯：請注意 React 組件回傳JSX

uj5u.com熱心網友回復：

看起來您正在嘗試制作某種手風琴，但您不應該真正將 vanilla JS 與 React 混合，因為 React 需要控制 DOM。

因此，這里有一個簡短的示例，說明您如何使用 1) 狀態和 2)Panel包含按鈕和一些內容的組件來處理此問題。

const { useState } = React;

function Example() {

  // Initialise state with an array of false values
  const [ state, setState ] = useState([
    false, false, false
  ]);

  // When a button in a panel is clicked get
  // its id from the dataset, create a new array using `map`
  // and then set the new state (at which point the component
  // will render again
  function handleClick(e) {
    const { id } = e.target.dataset;
    const updated = state.map((el, i) => {
      if (i === id - 1) return true;
      return false;
    });
    setState(updated);
  }

  // Pass in some props to each Panel component
  return (
    <div>
      
      <Panel
        name="Panel 1"
        active={state[0]}
        id="1"
        handleClick={handleClick}
      >
        <span className="text1">Content 1</span>
      </Panel>
      
      <Panel
        name="Panel 2"
        active={state[1]}
        id="2"
        handleClick={handleClick}
      >
        <span className="text2">Content 2</span>
      </Panel>
      
      <Panel
        name="Panel 3"
        active={state[2]}
        id="3"
        handleClick={handleClick}
      >
        <span className="text3">Content 3</span>
      </Panel>
    
    </div>
  );

}

function Panel(props) {
  
  // Destructure those props
  const {
    name,
    id,
    active,
    handleClick,
    children
  } = props;
  
  // Return a div with a button, and
  // content found in the children prop
  // When the button is clicked the handler is
  // called from the parent component, the state
  // is updated, a new render is done. If the active prop
  // is true show the content otherwise hide it
  return (
    <div className="panel">
      <button data-id={id} onClick={handleClick}>
        {name}
      </button>
      <div className={active && 'show'}>
        {children}
      </div>
    </div>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

.panel button:hover { cursor: pointer; }
.panel { margin: 1em 0; }
.panel div { display: none; }
.panel div.show { display: block; margin: 1em 0; }
.add { margin-top: 1em; background-color: #44aa77; }
.text1 { color: darkblue; font-weight: 600; }
.text2 { color: darkgreen; font-weight: 700; }
.text3 { color: darkred; font-weight: 300; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

uj5u.com熱心網友回復：

你不能用

document.getElementById("linkClass").onclick = () =>{
    displayContent();
}

通過給元素一個與類相同的ID？

標籤：javascript 反应

上一篇：mobx-react-lite：無法讀取未定義的屬性

下一篇：如何獲得最接近數字陣列平均值的數字？JavaScript