React Native - 设置TextInput游标位置 [英] React Native - Setting TextInput cursor position

问题描述

在我的React Native应用程序中，我正在尝试将 TextInput 的光标位置设置为特定位置（例如，到第5个字符），但我很难做到所以文档缺乏一点。我怀疑它与 TextInput 的'setSelection'属性有关，但我似乎无法找到该做什么。

In my React Native app, I am trying to set the cursor position of a TextInput to a particular position (eg. to the 5th character) but am have trouble doing so as the documentation is lacking a little. I suspect it has something to do with the 'setSelection' property of TextInput but I cannot seem to find out what to do.

有没有人成功完成？

谢谢。

推荐答案

As @ this.lau_表示有一个名为 selection 的控制器属性，它接受一个带有键开头和结尾的对象。

As @this.lau_ says there is a controller property called selection which accepts an object with keys start and end.

示例：

class ControlledSelectionInput extends Component {
    state = {
        selection: {
            start: 0,
            end: 0
        }
    }

    // selection is an object: { start:number, end:number }
    handleSelectionChange = ({ nativeEvent: { selection } }) => this.setState({ selection })

    render() {
        const { selection } = this.state;

        return <TextInput selection={selection} onSelectionChange={this.handleSelectionChange} />
    }
}

您还可以通过获取参考编程来设置选择到组件并使用 setNativeProps ，如下所示：

You can also programmatically set the selection by getting a ref to the component and using setNativeProps like this:

this.inputRef.setNativeProps({ selection:{ start:1, end:1 } })

示例：

class SetNativePropsSelectionInput extends Component {
    inputRef = null

    render() {
        const { selection } = this.state;

        return (
            <View>
                <TextInput ref={this.refInput} />
                <Button title="Move selection to start" onPress={this.handleMoveSelectionPress} />
            </View>
    }

    refInput = el => this.inputRef = el

    handleMoveSelectionPress = () => this.input.setNativeProps({
        selection: {
            start: 0,
            end: 0
        }
    })
}

这篇关于React Native - 设置TextInput游标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！