如何在反應組件中調用按鈕的 function 和 arguments onclick

Question

這是我的 function 和 arguments，我在腳本標簽的 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");
}

嘗試通過單擊我的反應組件上的按鈕來調用此 function，如下所示

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

請用語法指導我

Answer 1

這是正確的語法

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

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

Answer 2

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

因此，這里有一個簡短示例，說明如何使用 1) state 和 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>

Answer 3

你不能用

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

通過給元素一個與 class 相同的 id？