ReactJS 和 Material-UI：如何仅突出 Material-UI <Dialog> 中的内容而不是整个页面？

Question

在我的 ReactJS 项目中，我使用的是 <Dialog> (http://www.material-ui.com/#/components/dialog)，当我在 Mac 上打开 <Dialog> 并按 command + a 时，它会突出显示整个页面，而不仅仅是<Dialog>.

在 Mac 上按 command + a 打开 <Dialog> 时，如何仅突出显示 <Dialog> 中的内容？

提前感谢您，我们会接受/支持答案。

Answer 1

是的，这可以做到。您需要在componentDidMount() 中的window.document 上侦听Command-A（或Windows 上的Ctrl-A）并以编程方式执行文本选择。为了清理，您可以在 componentWillUnmount() 中取消收听。

这里的工作示例：http://www.webpackbin.com/41BuFVuBz

import React from 'react';
import { Dialog } from 'material-ui';

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    // In ES6 classes, class methods like handleKeyDown aren't automatically bound to "this"
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  handleKeyDown(e) {
    // If the A key is pressed while CTRL or COMMAND are also being pressed
    if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {
      // Don't perform the default action, which would select everything on page
      e.preventDefault();

      const win = window;
      const doc = win.document;
      // this.dialogBody is the div's DOM element captured in the ref={}
      const element = this.dialogBody;

      if (doc.body.createTextRange) {      // check if this is Internet Explorer
        // Select all text in "element", the IE way
        var range = doc.body.createTextRange();
        range.moveToElementText(element);
        range.select();
      } else if (win.getSelection) {      // other browsers...
        // Select all text in "element", the standard way
        var selection = win.getSelection();
        var range = doc.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
      }     
    }
  }

  componentDidMount() {
    // Element has been rendered, start capturing keyboard activity
    window.document.addEventListener('keydown', this.handleKeyDown);
  }

  componnetWillUnmount() {
    // Element is no longer been rendered, stop listening
    window.document.removeEventListener('keydown', this.handleKeyDown);
  }

  render() {
    return (
      <div>
        <p>
          Some text I don't want selected.
        </p>
        <p>
          More text I don't want selected.
        </p>
        <Dialog open>
          // Capture a reference to the div's DOM element inside ref={...} as this.dialogBody
          <div ref={(ref) => (this.dialogBody = ref)}>
            <h1>Hello World!</h1>
            <p>Nice day, isn't it?</p>
          </div>
        </Dialog>
      </div>
    );
  }
}

export default HelloWorld;

实际执行限制在 DOM 元素中的文本选择的代码可以在 SO 上的其他答案的细微变化中看到：

Select all DIV text with single mouse click

selecting all text within a div on a single left click with javascript

Select all or highlight all Text in an Element

...唯一的额外“技巧”是知道在 React 组件生命周期中将这样的 DOM 操作代码放在哪里（主要是 componentDidMount，通常在 ref 的帮助下，有时在 @ 中需要清理987654331@)