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

即使没有集中精力，如何使文本选择在文本区域中可见

1 个答案: