如何使用 react-native 的 TextInput 的 `selectionState` 属性？

Posted 2023-03-15

【中文标题】如何使用 react-native 的 TextInput 的 `selectionState` 属性？

【英文标题】：how does one use the `selectionState` prop of react-native's TextInput?

【发布时间】：2016-07-16 18:13:49

【问题描述】：

我正在构建一个 react-native 应用程序。我有一个<TextInput>，当发生某些事情时，我希望使<TextInput> 变得专注。 <TextInput> 实例上唯一记录在案的方法是 .isFocused() 和 .clear() - 看起来都不是我想要的。我显然想要.focus()。

我发现这个仅限 ios 的 selectedState 道具似乎提供了我正在寻找的东西。 The docs说：

iOS selectionState DocumentSelectionState

DocumentSelectionState 的一个实例，这是一个负责维护文档选择信息的状态。

可以使用此实例执行的一些功能是：

blur() focus() update()

你可以在vendor/document/selection/DocumentSelectionState.js中引用DocumentSelectionState

我不清楚如何使用这个道具，我也没有在网上找到任何示例。 doc页面上发布的冗长示例代码没有使用它。

谁能告诉我这可能是什么样子？这是我最好的猜测：

import React, 
    Component
 from 'react';
import 
    // the "DocumentSelectionState.js" file mentioned in the docs
    // lives inside react-native, so hopefully it's exported 
    DocumentSelectionState,
    TextInput,
    TouchableHighlight,
    View
 from 'react-native';
import Styles from './style';

export default class Scene extends Component 

    constructor(props) 
        super(props);

        // get my hands on "An instance of DocumentSelectionState"
        // which I can pass to the TextInput, and whose .focus()
        // method I can call
        this.text1DSS = new DocumentSelectionState();
    

    render() 
        return (
            <View style=Styles.CONTAINER>


                <TextInput style=Styles.TEXT_INPUT_1
                    // provide my own instance of DocumentSelectionState
                    // to the TextInput instead of whatever is the
                    // default source
                    selectionState=this.text1DSS
                />


                <TouchableHighlight style=Styles.BUTTON_FOR_FOCUSING_INPUT
                    onPress=this.onPressButton
                >
                    <View>
                        <Text>click me to focus textinput</Text>
                    </View>
                </TouchableHighlight>

            </View>
        );
    

    onPressButton = (event) => 
        // whenever I want to, I can invoke .focus() on the DSS
        // that's linked to the TextInput
        this.text1DSS.focus();
    ;

很遗憾，该代码无法运行：

undefined 不是构造函数（评估 'new _reactNative.DocumentSelectionState()'）

我认为这意味着 react-native 不会导出 DocumentSelectionState 成员（或者至少我的版本没有：0.23，仍然是 documents the prop）。

我无法弄清楚如何在 vanilla RN 设置中访问 DocumentSelectionState，所以我无法真正测试我的理论。

有没有人用过这个东西？

【参考方案1】：

我能够访问.focus() 方法的唯一方法是通过this.refs

您的代码如下所示：

import React,  Component  from 'react';
import  TextInput, TouchableHighlight, View  from 'react-native';
import Styles from './style';

export default class Scene extends Component 


    render() 
         return (
            <View style=Styles.CONTAINER>


                <TextInput 
                     style=Styles.TEXT_INPUT_1
                     ref='input'
                />


                <TouchableHighlight style=Styles.BUTTON_FOR_FOCUSING_INPUT
                    onPress=this.onPressButton
                >
                    <View>
                        <Text>click me to focus textinput</Text>
                    </View>
                </TouchableHighlight>

            </View>
        );
    

    onPressButton = (event) => 
        this.refs.input.focus()
    ;

希望有帮助

【讨论】：

啊！因此，大概其他方法也暴露在 ref 上。今晚我会试一试。如果这是真的，那么他们会记录这个DocumentSelectionState 对象对我来说很奇怪，因为（1）可能无法拿到它，并且（2）开发人员可能不需要它。跨度>

我当然发现他们如何记录它令人困惑。我的猜测是它要么是 b/c，要么该项目还很年轻，而且经常变化，所以他们还没有得到它。或者，他们想引用 DocumentSelectionState，以便开发人员可以扩展并为其功能做出贡献

你确定input.focus()和DocumentSelectionState.focus()的方法一样吗？

@PetrPeller 不，我不确定它们是否相同。此外，如果某些事实在 0.23 版和当前版本 (0.56) 之间发生了变化，我也不会感到惊讶。