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

Question

我正在构建一个 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，所以我无法真正测试我的理论。

有没有人用过这个东西？

Answer 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()
    };

}

希望有帮助