Как сформировать список при выборе слова? - PullRequest
Новая
       1

Как сформировать список при выборе слова?

0 голосов
/ 03 июня 2019

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

У меня есть такая таблица:

Столбец1

Я ем банан

У меня красивая машина

позволяет человеку дважды щелкнуть слово «банан», поэтому оно выбрано.

Мне нужно создать компонент с другими словами, которые прикреплены к выбранному слову.

Ответы [ 2 ]

0 голосов
/ 03 июня 2019

Вы можете создать компонент, который разбивает строку на массив и отображает части строки как отдельный HTML-элемент. Пример: 

class WordList extends React.Component {
  constructor(props) {
      super(props);

      this.onClick = this.onClick.bind(this);
  }

  onClick (word) {
    const { onClick } = this.props;
    onClick(word);
  }

  render () {
    const { word } = this.props;
    const wordsArr = word.split(" ");

    return (
      wordsArr.map((w, i) => (
       <>
          <span onClick={() => this.onClick(w)} key={i}>{w}</span> 
          <span> </span>
       </>
      ))
    )
  }
}

export default WordList;

И тогда вы можете включить компонент следующим образом: 

<WordList onClick={(word) => alert(word)} word={'I eat banana'} />
0 голосов
/ 03 июня 2019

Вы можете прослушать событие selectionchange , выяснить, является ли новый выбор равным в одном из элементов вашего списка (с помощью ссылок или ReactDOM.findDOMNode() чтобы отследить их) затем прочитайте текст выделения и затем примените обычную магию Реакта для генерации другого компонента.

...