Question

如何生成包含所选单词的单词列表？

我有一张这样的桌子：

第1列

我吃香蕉

我有辆漂亮的车

假设某人双击“香蕉”一词，便被选中。

我需要生成带有附加到所选单词的其他单词的组件。

Answer 1

您可以收听selectionchange event，确定new selection是否为in one of your list elements（使用引用或ReactDOM.findDOMNode()来跟踪），然后read the selection's text然后执行通常的React魔术来生成其他组件。

Answer 2

您可以创建一个将字符串拆分为数组并将字符串的一部分显示为单独的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'} />

选择单词时如何生成列表？

2 个答案: