React Native 如何以编程方式在TextInput组件中选择文本

eoxn13cs  于 2022-12-30  发布在  React
关注(0)|答案(6)|浏览(153)

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

vvppvyoh

vvppvyoh1#

你可以使用selectTextOnFocus来实现这一点,这将确保当点击TextInput时,其中的所有文本都被高亮显示。

dz6r00yl

dz6r00yl2#

实际上可以,通过引用访问textInput的方法。
第一个月
以及希望以编程方式选择所有文本的位置,您可以
this.myInput.focus()
在iOS上工作,不确定Android。
Reference : http://facebook.github.io/react-native/releases/0.45/docs/textinput.html#selectionstate

mlnl4t2r

mlnl4t2r3#

我不知道是否有更好的方法,但我找到了一个变通办法。文本必须首先聚焦。下面是一个例子

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

vsdwdz234#

我在这里分享我的发现。在一个列表中,你可能会遇到selectTextOnFocus是坏的。在这种情况下,你可以使用这个方法selection。从React-Native我发现了这个:

在我的例子中,我在使用列表中的selectTextOnFocus prop时遇到了麻烦,所以我必须添加一个debounce函数来使用selection prop。

const [shouldSelect, setShouldSelect] = useState(undefined);
const onFocus = () =>{
    setShouldSelect({start:0, end:String(text).length});
}
const focus = useCallback(_.debounce(onFocus,500),[shouldSelect]);
  <TextInput
        selection={shouldSelect}
        onBlur={()=>setShouldSelect(undefined)}
        onFocus={()=>focus()}// this is important
        selectTextOnFocus
        ref={r=>onRef(r)}
        keyboardType={'number-pad'}
        autoCorrect={false}
        blurOnSubmit={false}
        returnKeyType={'done'}
        underlineColorIos={'transparent'}
        underlineColorAndroid={'white'}
        allowFontScaling={false}
        value={String(text)}
    />
lsmepo6l

lsmepo6l5#

this.inputRef.focus()将焦点设置到TextInput组件,然后在属性selectTextOnFocus中设置的标志执行其余操作。

zd287kbt

zd287kbt6#

注意:对于那些想使用selectTextOnFocus的人,简单回答。实际上,它在IOS中工作正常,但在Android中不工作。
多亏了阿尔纳夫·亚格尼克;以下是功能组件中的类似方法:

const inputRef = React.useRef(null);

React.useEffect(() => {
  if (inputRef.current) {
    console.log('focusing !');
    inputRef.current.focus();
  }
}, []);

return <TextInput
        multiline
        label="Amount"
        selectTextOnFocus
        placeholder="Write Count"
        value={stockCount.toString()}
      />

相关问题