React，如何以编程方式选择组件单击上的文本

Question

我想在单击时选择一个简单的 span 元素的内容

<span 
  onClick={() => // How do I programmatically highlight the `Click Me!` text?}
>Click Me!</span>

有什么办法可以做到这一点吗？

编辑：很抱歉，问题似乎不够清楚，我不仅想突出显示跨度，而且实际上想触发元素的 dom 选择，因此之后可以复制和/或写入（例如，如果它位于打开了可编辑内容的 div 中）。

Answer 1

您可以使用反应状态以span编程方式突出显示。

class App extends React.Component {
  state = {
    highlightOn: false,
    smallPortionHighlight: false
  };

  render() {
    return (
      <div>
        <span
          style={{ backgroundColor: this.state.highlightOn ? "red" : "white" }}
          onClick={() => this.setState({ highlightOn: true })}
        >
          Click Me!
        </span>

        <br />
        <br />
        <span onClick={() => this.setState({ smallPortionHighlight: true })}>
          Here is a long text but just highlight this{" "}
          <span
            style={{
              backgroundColor: this.state.smallPortionHighlight
                ? "red"
                : "white"
            }}
          >
            Click Me!
          </span>
        </span>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>