Question

有没有办法以编程方式突出显示/选择TextInput组件内的文本？

Answer 1

您可以使用selectTextOnFocus来实现此目的。这将确保在点击字段时突出显示TextInput内的所有文本。

Answer 2

实际上你可以通过refs访问textInput的方法。

<TextInput ref={input => this.myInput = input} selectTextOnFocus style={{height: 100, width: 100}} defaultValue='Hey there' />

并且您希望以编程方式选择所有文本

this.myInput.focus()

适用于iOS，不确定android。

参考：http://facebook.github.io/react-native/releases/0.45/docs/textinput.html#selectionstate

Answer 3

我不知道是否有更好的方法，但我找到了解决方法。该文本必须首先集中。这是一个例子

import React { Component } from 'react';
import { Button, TextInput, findNodeHandle } from 'react-native';
import TextInputState from 'react-native/lib/TextInputState';

class MyComponent extends Component {
  render() {
    return (
      <View style={{ flex: 1, }}>
        <Button
          title="select text"
          onPress={() => {
            TextInputState.focusTextInput(findNodeHandle(this.inputRef))
          }}
        </
        <TextInput
          selectTextOnFocus
          ref={ref => this.inputRef = ref}
        />
      </View>
    );
  }
}

Answer 4

this.inputRef.focus()将焦点设置为TextInput组件，然后您在属性selectTextOnFocus中设置的标记将完成剩下的工作。

如何以编程方式选择TextInput组件中的文本

4 个答案: