在內部輸入焦點上選擇react-bootstrap-typeahead內部的所有文本

Question

當輸入集中在例如單擊時，我需要選擇react-bootstrap-typeahead內的所有文本。

在公共API中 ，對此沒有提及。

我該如何實現？

Answer 1

沒有公共的API或規范的方法可以做到這一點，但是這肯定是可能的。 您需要做的是獲取輸入節點，然后設置選擇范圍 。 這是一個例子：

class MyTypeahead extends React.Component {    
  render() {
    return (
      <Typeahead
        onFocus={(event) => {
          const inputNode = document.getElementById('typeahead-input');
          inputNode.setSelectionRange(0, inputNode.value.length);
        }}
        inputProps={{id: 'typeahead-input'}}
      />
    );
  }
}

編輯：獲取輸入節點的替代方法：

從事件：

class MyTypeahead extends React.Component {    
  render() {
    return (
      <Typeahead
        onFocus={(event) => {
          const inputNode = event.target;
          inputNode.setSelectionRange(0, inputNode.value.length);
        }}
        ...
      />
    );
  }
}

使用參考：

class MyTypeahead extends React.Component {    
  render() {
    return (
      <Typeahead
        onFocus={(event) => {
          const inputNode = this.typeahead.getInstance().getInput();
          inputNode.setSelectionRange(0, inputNode.value.length);
        }}
        ref={(el) => this.typeahead = el}
        ...
      />
    );
  }
}