有没有办法以编程方式突出显示/选择TextInput组件内部的文本?
vvppvyoh1#
你可以使用selectTextOnFocus来实现这一点,这将确保当点击TextInput时,其中的所有文本都被高亮显示。
selectTextOnFocus
TextInput
dz6r00yl2#
实际上可以,通过引用访问textInput的方法。第一个月以及希望以编程方式选择所有文本的位置,您可以this.myInput.focus()在iOS上工作,不确定Android。Reference : http://facebook.github.io/react-native/releases/0.45/docs/textinput.html#selectionstate
this.myInput.focus()
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> ); } }
vsdwdz234#
我在这里分享我的发现。在一个列表中,你可能会遇到selectTextOnFocus是坏的。在这种情况下,你可以使用这个方法selection。从React-Native我发现了这个:
selection
在我的例子中,我在使用列表中的selectTextOnFocus prop时遇到了麻烦,所以我必须添加一个debounce函数来使用selection prop。
debounce
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)} />
lsmepo6l5#
this.inputRef.focus()将焦点设置到TextInput组件,然后在属性selectTextOnFocus中设置的标志执行其余操作。
this.inputRef.focus()
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()} />
6条答案
按热度按时间vvppvyoh1#
你可以使用
selectTextOnFocus
来实现这一点,这将确保当点击TextInput
时,其中的所有文本都被高亮显示。dz6r00yl2#
实际上可以,通过引用访问textInput的方法。
第一个月
以及希望以编程方式选择所有文本的位置,您可以
this.myInput.focus()
在iOS上工作,不确定Android。
Reference : http://facebook.github.io/react-native/releases/0.45/docs/textinput.html#selectionstate
mlnl4t2r3#
我不知道是否有更好的方法,但我找到了一个变通办法。文本必须首先聚焦。下面是一个例子
vsdwdz234#
我在这里分享我的发现。在一个列表中,你可能会遇到
selectTextOnFocus
是坏的。在这种情况下,你可以使用这个方法selection
。从React-Native我发现了这个:在我的例子中,我在使用列表中的
selectTextOnFocus
prop时遇到了麻烦,所以我必须添加一个debounce
函数来使用selection
prop。lsmepo6l5#
this.inputRef.focus()
将焦点设置到TextInput
组件,然后在属性selectTextOnFocus
中设置的标志执行其余操作。zd287kbt6#
注意:对于那些想使用
selectTextOnFocus
的人,简单回答。实际上,它在IOS中工作正常,但在Android中不工作。多亏了阿尔纳夫·亚格尼克;以下是功能组件中的类似方法: