React Native - 设置 TextInput 光标位置

Question

在我的 React Native 应用程序中，我正在尝试将 TextInput 的光标位置设置为特定位置（例如，设置为第 5 个字符），但由于文档缺少一点，我无法这样做。我怀疑这与TextInput 的“setSelection”属性有关，但我似乎不知道该怎么做。

有人成功了吗？

谢谢。

Answer 1

正如@this.lau_ 所说，有一个名为selection 的受控属性接受一个带有开始和结束键的对象。

例子：

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 以编程方式设置选择，如下所示：

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

Answer 2

现在TextInput 上有一个selection 属性，可用于设置选择或插入符号/光标位置。

Answer 3

我想我想要类似的东西。我想在输入处于活动状态时将开始重置为 0，但仍允许用户移动光标。我有一个状态变量来跟踪输入何时处于活动状态（“isActive”），所以我这样做了：

<TextInput selection={this.state.isActive ? undefined : { start: 0 }} />

我使用了undefined，因为它是我可以通过 selection 属性找到的唯一“默认”值。

Answer 4

我只知道原生方式：

public static void adjustCursor(EditText dgInput) {
    CharSequence text = dgInput.getText();
    if (text instanceof Spannable && text.length() > 0) {
        Spannable spanText = (Spannable) text;
        Selection.setSelection(spanText, text.length());
    }
}

也许你可以在 React Native 中找到相同的方法。

Answer 5

我在文档https://facebook.github.io/react-native/docs/textinput.html 中看不到任何setSelection 属性，我也不相信核心支持这一点。

如果您在 Android 中执行此操作，我建议您使用 Tiny 的代码并构建自己的原生组件。 https://facebook.github.io/react-native/docs/native-modules-android.html#content

当然，如果你有技能，你也可以在 iOS 中做同样的事情...... https://facebook.github.io/react-native/docs/native-modules-ios.html#content

Answer 6

似乎该选择仅在您的文本输入处于焦点时才有效

你可以做以下事情来让它工作

class YourComponent extends React.Component{
      constructor(props) {
       super(props);
       this.state = {
       text:'Hello World',
       selection: {
        start: 0,
        end: 0
       }
  };

this.inputRefs = {};
}

   setSelection = () => {
      this.setState({ select: { start: 1, end: 1 } });
      };

    changeText = (val) => {
     this.inputRefs.input.focus();
    }

    render(){
       return(
          <TextInput 
            onFocus={this.setSelection}
            selection={this.state.setSelection} 
            onChangeText={val => {this.changeText(val)}} 
            value={this.state.text}
             refName={ref => {
             this.inputRefs.input = ref;
             }}
            />
       )
    }
} 

这个想法是每当您的 TextInput 调用 onChangeText 回调时，通过 refs 将焦点放在您的 TextInput 上，因为您的组件正在响应 onFocus 回调，我们将在该回调上设置选择