Как сделать слова внутри текста кликабельными? - PullRequest
Новая
       47

Как сделать слова внутри текста кликабельными?

0 голосов
/ 06 февраля 2020

Я ищу решение сделать слова в тексте кликабельными, я думал о том, чтобы разделить текст на массив слов и создать btn для каждого слова ... но это решение имеет плохую производительность ... у кого-то есть идея? текст: 

const paragraph = 'Emma Woodhouse, handsome, clever, and rich, with a comfortable home and happy disposition, seemed to unite some of the best blessings of existence; and had lived nearly twenty-one years in the world with very little to distress or vex her.'

Спасибо !!

Ответы [ 3 ]

0 голосов
/ 06 февраля 2020

Вот решение React: 

function clickableWords(paragraph, clickCallback) {
  const words = paragraph.split(/ /g);
  return words.map(w => 
    <span onClick={() => clickCallback(w)}>{w}</span>
  );
}

При нажатии на слово будет вызываться clickCallback со словом в качестве параметра.

0 голосов
/ 06 февраля 2020

Я не думаю, что есть лучший способ достичь вышеупомянутого, кроме преобразования его в массив (например, с использованием Array.from()), итерации по предложению и рендеринга каждого символа в виде индивидуально нажимаемых элементов. 

export function App() {
  const paragraph = 'Emma Woodhouse, handsome, clever, and rich, with a comfortable home and happy disposition, seemed to unite some of the best blessings of existence; and had lived nearly twenty-one years in the world with very little to distress or vex her.';

  const handleClick = (word) => {
    console.log(word);
    // handle the rest

  };

  const renderParagraph = () => Array.from(paragraph)
    .map((word) => <span onClick={() => handleClick(word)}>{word}</span>);

  return (
    <div className="App">
      {renderParagraph()}
    </div>
  );
}
0 голосов
/ 06 февраля 2020

Предполагая, что вы хотите поместить эти слова на страницу html, лучше всего было бы заключить каждое слово в элемент <span> и прикрепить обработчик щелчка к <span>.

, например. , 

<span>Emma</span> <span>Woodhouse</span>...

, а затем 

Array.from(document.querySelectorAll('span')).forEach(span => {
 span.addEventListener('click', ...)
})

, конечно, может быть другой предпочтительный способ сделать это, используя React или другой фреймворк или lib.

Есть также Более удобные способы реализовать это, например, реализовать обработчик щелчка на document, который проверяет тип элемента. Таким образом, у вас есть только один обработчик для всех элементов, а не один обработчик для каждого элемента.

См. AddEventListener для MDN

...