Question

我需要在关注输入时选择react-bootstrap-typeahead内的所有文字，例如点击。

在public API中没有提到这一点。

我怎样才能做到这一点？

Answer 1

没有公共API或规范方法，但它肯定是可能的。您需要做的是获取输入节点，然后set the selection range。这是一个例子：

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

使用ref：

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

在内部输入焦点上选择react-bootstrap-typeahead内的所有文本

1 个答案: