Как передать контекст при вызове функции через onClick?

Question

Необходимо, чтобы при клике на "DOM-элемент" блок <p>Hello!</p> внутри него менялся на <p>Goodbye!</p>. Для этого был написан следующий реакт компонент:

import React from 'react'

const Test = () => {
    return (
        <div>
            <div
                onClick={() => {this.innerHTML = '<p>Goodbye!</p>'}}
            >
                    <p>Hello!</p>
            </div>
        </div>
    )
}

export default Test

То есть по сути я хочу добиться следующего, но в React.

<div>
    <div
        onclick="this.innerHTML = '<p>Goodbye!</p>'"
    >
            <p>Hello!</p>
    </div>
</div>

Однако в реакт событие onClick работает несколько иначе и принимает this за undefined, как тогда передать контекст?

Answer 1

Лучше используйте состояние компонента.

import { useState } from "react";

export default function App() {
  const [markUp, setMarkUp] = useState("<p>Hello!</p>");
  return (
    <div>
      <div
        dangerouslySetInnerHTML={{ __html: markUp }}
        onClick={() => setMarkUp("<p>Goodbye!</p>")}
      />
    </div>
  );
}

Answer 2

Если прям втупую, то так:

import React from 'react'

const App = () => (
    <p onClick={e => e.target.innerHTML = 'Goodbye'}>Hello</p>
)


export default App

БЛОГ НА HUSL

Как передать контекст при вызове функции через onClick?

Ответы (2 шт):