Reactjs 如何在未聚焦的情况下保持文本区域中的文本选择可见

如何在React/JS中使选定内容失去焦点时在文本区域中保持可见

---

当我学习JavaFX时，它有一个文本区域组件，它总是显示文本的选择，即使不在焦点状态。只有聚焦时它的颜色是蓝色（高光），不聚焦时它的颜色是灰色。

我可能已经做了类似的事情，也许它可以帮助或给你一个想法

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.myRef=React.createRef（）；
this.handleOnExit=this.handleOnExit.bind（this）；
this.handleClick=this.handleClick.bind（this）；
}
出口（东）{
const node=this.myRef.current；
node.select（）；
}
handleClick（）{
const node=this.myRef.current；
node.select（）；
console.log（this.myRef）；
}
render（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
点击
btn-2
)};
}

本机、浏览器输入不可能-生成自定义字段/编辑组件好的，谢谢您的评论。