Question 398487 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Local DOM Events with React

Does React help me with local events that are not related with the state?

Consider the following HTML example.

<p id="func_123">it is me</p>

<p><span onmouseover="document.getElementById('func_123').style.color='orange'")>
There </span> you are.</p>

I try to do this in React. But I don’t want to establish the whole top-down unidirectional data flow approach for this event. That event does not have an impact to the data model so I don’t want to have it in the state. It is just a small visualisation thing.

Does React help me with this?

This is what I have so far:

import React from 'react';

export function LocalDiv(){
  const hightlight = (node) => {node.style.color='orange'}
  function P1() {
    return <p>it is me</p>
  }
  function P2() {
    return <p><span onMouseOver={hightlight}">There</span> you are</p>
  }
  return <div><P1/><P2/></div>;
}

export function App(props) {
  return <LocalDiv></LocalDiv>
}

But I don’t manage to get the P1 node into the hightlight function. I tried a few things. But I don’t know if I am trying to achieve something which should better done completely in a different way.

Tags:

2

Answers


  1. 0

    I’m sorry if I don’t fully understand your needs, but here’s just a suggestion: you can achieve this with CSS. As you said "It is just a small visualization thing.", and that’s exactly what CSS is used for.

    function LocalDiv(){  
  function P1() {
    return <p>it is me</p>
  }
  function P2() {
    return <p><span className="orange">There</span> you are</p>
  }
  return <div><P1/><P2/></div>;
}

function App(props) {
  return <LocalDiv />
}

ReactDOM.render(<App />, document.getElementById("app"));

    .orange:hover {
    color: orange;
}
    Login or Signup to reply.
  2. 0

    In React, if you want to handle local events and make small visual changes without involving the state, you can use the useRef hook to directly access and manipulate the DOM elements.

    from this way you can apply visual changers, without affecting the component’s state.

        import React, { useRef } from 'react';

export function LocalDiv() {
  // ref for the <p> element that needs to be highlighted
  const p1Ref = useRef(null);

  // Function to change the color of the <p> element
  const highlight = () => {
    if (p1Ref.current) {
      p1Ref.current.style.color = 'orange';
    }
  };

  // Function to reset the color of the <p> element
  const resetHighlight = () => {
    if (p1Ref.current) {
      p1Ref.current.style.color = 'initial';
    }
  };

  function P1() {
    return <p ref={p1Ref}>it is me</p>;
  }

  function P2() {
    return (
      <p>
        <span
          onMouseOver={highlight}
          onMouseOut={resetHighlight}
        >
          There
        </span>{' '}
        you are
      </p>
    );
  }

  return (
    <div>
      <P1 />
      <P2 />
    </div>
  );
}

export function App(props) {
  return <LocalDiv />;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search