1

Необходимо, чтобы при клике на "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, как тогда передать контекст?

1
  • В этом случае, никак. Используйте event.target, чтобы заменить innerHTML 18 фев 2022 в 10:54

2 ответа 2

0

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

import React from 'react'

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


export default App
0

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

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>
  );
}
4
  • здесь лучше условный вывод использовать, потому что вставляемы html в общем случае может отличаться и одной текстовой переменной будет уже не обойтись
    – Grundy
    18 фев 2022 в 11:34
  • @Grundy, я бы так сделал даже. Беря в учет, что там можно использовать хтмл разметку
    – entithat
    18 фев 2022 в 11:40
  • как вариант :) но как-то не безопасно, если не знаешь откуда html приходит
    – Grundy
    18 фев 2022 в 11:48
  • @Grundy, это да. Но тут показал принцип, что так можно
    – entithat
    18 фев 2022 в 11:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.