React добавление обработчика только что созданным элементам

145

06 июля 2022, 16:00

Как правильно навесить обработчик на элемент, который создается в хуках?

const getInfo = () => {
    console.log('test')
};
useEffect(() => {
    let elements = `<span onClick="${() => getInfo()}">test</span>`;
    console.log(elements)
});

Так не работает.

Объясню, что я хочу в целом.

У меня рендерится страница с параграфом в котором текст. Каждое слово этого параграфа мне надо обернуть в отдельный span с обработчиком клика. Я брал абзац, разделял слова с помощью split, затем каждое слово оборачивал в span с обработчиком (как показано в примере выше) и заменял (innerHtml) содержимое параграфа на новое.

Answer 1

Можно сделать так:

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
  ReactDOM.render(<App />, document.getElementById('root')); 
  
  function App() {
      const text = 'Hello world!';
      
      function click(word) {
        console.log(word);
      }
      
      return <h1>{text.split(' ').map((e, i) => <span key={i} onClick={() => click(e)}>{e} </span>)}</h1>; 
  }
</script>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

определенный скролл, анимация при скролле

нужен примерно такой скроллинг как показанно здесь, http://luminouspilcom/#, я использовал инструмент snap-scroll, но не получил то что ожидал, на сайте, который...

126

javascript