Question

我正在制作一个像工具栏一样的工具栏，当你突出显示一系列文字时，工具提示会弹出文本顶部。我正在使用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;

我知道这并不多，但我想我在这里过分思考。你们可以给我的任何帮助都将不胜感激。

Answer 1

我认为您可以拥有一个组件列表，其中每个组件都有自己的历史记录或其他任何内容，并在主组件中显示组件列表。然后，在home组件中，您可以打开所需的工具栏和工具栏组件。因此，您可以将该函数作为prop传递给每个项列表组件，并将其绑定到home组件。

然后每个组件都有一个onClick事件，您可以将该prop作为函数调用。

我有一个例子，我为我的个人项目做了： let activities = this.state.activities.map（function（activity）{

        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>
    );

所有这些都在＆＃34; Home＆＃34;零件。而来自Activity组件我有一个onClick事件，我将propTouchTap称为函数。

在页面上选择和突出显示html的最佳方法是什么？

1 个答案: