即使没有集中注意力，如何在文本区域保持文本选择可见

Question

当在react/js中失去焦点时，如何在文本区域保持选择可见。

那时，当我了解Javafx时，它具有文本区域组件，它总是显示其文本的选择，甚至不在焦点状态下。当焦点和灰色时，只有其颜色是蓝色的(高光(。

Answer 1

我可能已经做过这样的事情，也许它可以帮助或给您一个想法

class App extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.handleOnExit = this.handleOnExit.bind(this);
    this.handleClick = this.handleClick.bind(this);
}
handleOnExit(e) {
  const node = this.myRef.current;
  node.select();
}
handleClick() {
  const node = this.myRef.current;
  node.select();
  console.log(this.myRef);
}
render() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input ref={this.myRef} type="text" onBlur={this.handleOnExit} value="aaaa" />
      <input type="text" value="bbbb" />
      <button onClick={this.handleClick}> Click</button>
      <button onClick={this.handleClick}> btn-2</button>
    </div>
  )};
}