Как изменить текст в теге <p>при наведении курсора на кнопку ReactJs?

Question

Я пытаюсь изменить текст <p> на Дэвид и Ларри соответственно, когда наведена каждая кнопка. Я экспериментировал со многими вещами и нашел способ заменить css из на кнопку с помощью функции. Но я не смог найти ничего для изменения текста, поскольку <p> относится к другому классу. Любые предложения по решению этой проблемы?

Для вашей информации, я добавил css функцию изменения, которую я использовал ранее, в приведенный ниже пример кода.

вот мой код .

import React from 'react'; 
import "./Tri.css";

function Tri() {
    function davidon(e) {
        e.target.style.background = 'red';
    }

    function davidoff(e) {
        e.target.style.background = 'green';
    }
    function larryon(e) {
        e.target.style.background = 'red';
    }

    function larryoff(e) {
        e.target.style.background = 'green';
    }

    return (  
        <div>
            <div>
                <div>

                <button onMouseOver={davidon} onMouseLeave={davidoff}>
                    <img src={require(`./images/david.png`)} className="david"/>
                </button>

                <button onMouseOver={larryon} onMouseLeave={larryoff}>
                    <img src={require(`./images/larry.png`)} className="larry"/>
                </button>
                </div>

                <div className="plex">
                    <p>Larry Or David?</p>
                </div>

            </div>

        </div>
    );

}

export default Tri;

Заранее спасибо за ответы.

Answer 1

Вы ищете Refs. Вы можете прочитать больше о них в документации .
Я создал простой пример (на основе вашего кода).

Шаг за шагом, что я сделал:

1. import useRef hook, который используется для создания ссылки.

import React, { useRef } from "react";

созданная ссылка:

const pTagRef = useRef();

передал ссылку на ваш p тег

<div ref={pTagRef} className="plex">
    <p>Larry Or David?</p>
</div>

созданная функция, которая может изменить содержание этой ссылки, где pTagRef.current является элементом DOM.

function setName(name) {
    if (pTagRef.current) {
      pTagRef.current.innerText = name;
    }
}

вызывал функцию всякий раз, когда имя изменялось

setName("larry");

---

Вы обязательно должны использовать state для этого, но я надеюсь, что это поможет вам начать.

Answer 2

Вам нужно больше думать в «Реагировать» и использовать состояние компонента и реквизит. официальная документация - хорошее место для начала.

Здесь у меня есть два компонента.

1) Tri: который имеет свое собственное состояние и собирает HTML с использованием компонентов Button

2) Button: поскольку каждая кнопка требует изменения цвета в зависимости от действия мыши, лучше выделить эту функцию в новый компонент, чтобы каждый экземпляр мог иметь свой свое собственное состояние.

(я намеренно пропустил изображения в этом примере, но вы можете передать src реквизит кнопке и иметь эту обработку, если хотите, и изображения).

const { useState } = React;

// `Button` accepts a props object
// Here I've destructured out the button name,
// and the handleHover function
function Button({ name, handleHover }) {

  // We initialise the state with "green"
  const [ color, setColor ] = useState('green');

  function handleColor() {

    // We set the new color based on the current color
    setColor(color => color === 'red' ? 'green' : 'red');

    // And then call the `handleHover` function, passing in `name`
    handleHover(name);
  }

  return (
    <button
      className={color}
      onMouseOver={handleColor}
      onMouseLeave={handleColor}
    >
      {name}
    </button>
  );
}

function Tri() {
  
  // In `Tri` we set its own state for the name
  // initialised to an empty string
  const [ name, setName ] = useState('');
  
  // A handler that changes the name
  // This is the function we pass to each button
  function handleHover(name) {
    setName(name);
  }
  
  // Set up two buttons using our Button component
  // assigning a name to each, and passing in our handler
  // Whenever the name (state) is changed the name in the
  // paragraph also changes
  return (
    <div>
      <div>
        <Button name="Larry" handleHover={handleHover} />
        <Button name="David" handleHover={handleHover} />
      </div>
      <p>{name}</p>
    </div>
  );
}

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

.red { background-color: red; }
.green { background-color: green; }

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

Answer 3

Попробуйте использовать состояния. И не меняйте DOM-узлы динамически в обработчиках событий. Всегда используйте функциональность React:

React использует декларативную форму программирования (в частности, The Virtual DOM). Вы определяете переменные и устанавливаете их, а React обновляет DOM, если они меняются.

useState дает вам возможность объявить редактируемую (через функцию setter) переменную. См. Документы по Состояние и реквизиты .

import React from 'react';
import "./Tri.css";

function Tri(props) {
    // props as immutable arguments (if needed)


    // useState keeps an internal state in the component
    let initialTxt = 'Larry Or David?';
    const [text, setText] = React.useState(initialTxt);


    return (
        <div>
            <div>
                <div>
                    <button
                        className="david-btn"
                        onMouseOver={() => setText('David')}
                        onMouseLeave={() => setText(initialTxt)}>
                        <img src={require(`./images/david.png`)} className="david"/>
                    </button>

                    <button
                        className="larry-btn"
                        onMouseOver={() => setText('Larry')}
                        onMouseLeave={() => setText(initialTxt)}>>
                        <img src={require(`./images/larry.png`)} className="larry"/>
                    </button>
                </div>

                <div className="plex">
                    <p>{text}</p>
                </div>

            </div>

        </div>
    );

}

Также добавьте ./Tri.css с помощью следующего кода. Вы можете использовать переменную стиля, но это сделает ваш код более раздутым и нечитаемым, если у вас есть доступ к CSS.

.david-btn,
.larry-btn {
    background-color: green;
}

.david-btn:hover,
.larry-btn:hover {
    background-color: red;
}