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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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