ページ上でhtmlを選択してハイライト表示するにはどうすればよいですか？

Question

私は、あなたがテキストの選択をハイライトすると、テキストの上にツールチップがポップアップするようなツールバーのようなmedium.comを作るのを探しています。私はこれにReactとRailsを使っています。

私の思考プロセスは、選択したテキストの上に表示されるツールチップを巧妙に取り除く前に、選択したテキストを強調表示する方法を最初に開発することでした。私は、選択したテキストをキャプチャして状態に送信し、そのテキストをドキュメントで検索し、背景色を黄色に変えるクラスを持つhtmlタグを追加する必要があると考えています。私はそれを行った後、このアクションをツールチップ上にあるボタンに組み込むことができます。そのボタンをクリックすると、そのテキストが強調表示されます。

は、ここで私がこれまで持っているものです。

import React from 'react'; 
 

 
class Main extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {text: ''} 
 
    } 
 

 
    render() { 
 
    return (
 
     <div className = "container" onMouseUpCapture={this.handleChange.bind(this)}> 
 
     <h1 className = "headLine" >Medium Markup</h1> 
 
      <p className='editable'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id felis vel sem tristique efficitur. Nunc neque purus, tempor eget urna eu, porttitor congue nulla. Morbi vitae lectus sollicitudin, congue dolor ac, ornare ex. Aenean molestie rutrum mauris, vel ultricies erat pellentesque eget. Nunc at nisi id turpis lobortis ultrices ac eget mi. Cras ac facilisis leo. Vestibulum a enim eget ex tempor pretium. Nunc dignissim bibendum molestie. Fusce imperdiet imperdiet tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nec gravida massa. Fusce tristique, nulla vitae porttitor venenatis, mi sem fermentum metus, sit amet auctor mi nisl nec erat.</p> 
 
     
 
     </div> 
 
    ); 
 
    } 
 

 
    handleChange(text) { 
 
    var name = document.documentElement.innerHTML.indexOf(this.state.text); 
 
    console.log(name); 
 
    var text = ""; 
 
    if (window.getSelection) { 
 
     text = window.getSelection().toString(); 
 
    } 
 
    this.setState({text: text.toString()}); 
 
    } 
 
} 
 

 
export default Main;

私はそれがあまりありません知っているが、私は私が道ここにこれをoverthinkingていると思います。あなたが私に与えることができるどんな助けも高く評価されます。

Answer 1

私は、各コンポーネントに独自の履歴などがあり、ホームコンポーネントにコンポーネントのリストを表示するコンポーネントのリストを持つことができると思います。 次に、ホームコンポーネントには、必要なツールバーを開く機能と、ツールバーコンポーネントがあります。したがって、その機能を各アイテムリストコンポーネントに、小道具として渡して、ホームコンポーネントにバインドすることができます。

各コンポーネントにはonClickイベントがあり、そのプロップを関数として呼び出すことができます。

は、私は私が私の個人的なプロジェクトのためにした例があります。 LET活動= this.state.activities.map（機能（活性）{

 return <div> <ListItem 

                 primaryText={activity.name} 
                 leftAvatar={<Avatar style={{backgroundColor: "white"}} 
                      src={activity.icon}/>} 
                 secondaryText={activity.info} 
                 rightIconButton={rightIconMenu(element)} 
                 onTouchTap={element.positionateActivity.bind(element, activity)} 
                 hoverColor="rgb(0, 188, 212)" 
     > <Activity 
        activity={activity}> </Activity></ListItem> 
     </div> 


    }); 
return (
     <div> 

      <SearchSport activities={this.state.activities} filterFunction={this.filterActivities.bind(this)}/> 
      <SelectableList defaultValue={6}> 
       {activities} 
      </SelectableList> 
     </div> 
    ); 

このすべては、「ホーム」コンポーネントであるが。 そしてfromアクティビティコンポーネントには、関数としてonTouchTapを呼び出すonClickイベントがあります。