0

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

const getInfo = () => {
    console.log('test')
};

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

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

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

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

1
  • дайте полный код
    – RavenTheX
    26 ноя 2020 в 14:28

1 ответ 1

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>

2
  • Очень признателен вам! Спасибо.
    – WoodRest
    27 ноя 2020 в 7:42
  • @WoodRest, пожалуйста
    – entithat
    27 ноя 2020 в 10:34

Ваш ответ

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

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