如何從 dom 元素（div/img/input）中捕獲不同的事件以及如何與 react js 交互（獲取/設置屬性、styles、類）？

Question

例如我們有這個按鈕和這個 div

<button onClick={test_func}>
</button>
<div class="js_test">
</div>

在 jquery 我們這樣做！

$(document).on('click', '.js_test', fu
    //code
});
$(document).on('EVENT_TYPE', 'ELEMENT_DOM', function(evt) {});

$('ELEMENT_DOM').css();
$('ELEMENT_DOM').attr();
$('ELEMENT_DOM').addClass();

在 js 中，您可以通過 class 或 id 捕獲所有事件

.js_test

那么在 React.js 中怎么樣？

test_func() {
    //inside here i need to do something with div .js_test 
    // to set text, add new class, set new css style like color: 'red' for example
}

Answer 1

您可以在 function 中接收事件，並使用 e.target (.nextElementSibling 定位靠近按鈕的 div) 或者您可以使用 useRef 掛鈎，並使用 ref.current

import { useState } from "react";
import { useRef } from "react"

function Teste(){
    const ref = useRef();
    const [darkMode, setDarkMode] = useState(false);

    function AlterWithEDotTarget(e){
        e.target.nextElementSibling.innerHTML = "WAS ALTERED!"
    }

    function AlterWithUseRef(){
        ref.current.innerHTML  = "WAS ALTERED!";
    }

    function ToggleDarkMode() {
        setDarkMode(!darkMode)
    }

    return (<>
                <button onClick={AlterWithEDotTarget}>Alter With e.target</button>
                <div>Will be altered with e.target {darkMode ? "DarkMode ON" : ""}</div>

                <br/>
                <br/>

                <button onClick={AlterWithUseRef}>Alter With useRef</button>
                <div ref={ref}>Will be altered with useRef {darkMode ? "DarkMode ON" : ""}</div>

                <br/>
                <br/>

                <button onClick={ToggleDarkMode}>Toggle Dark Mode</button>
            </>)

}

export default Teste

編輯

In react things are different than jQuery, i added an example targeting multiple elements, you do it using state, and binding the state to the elements, and when the state changes, the elements change as well