React Native - 单击文本时如何使用 ref 将焦点设置到输入

Question

这是我正在做的事情：

export default class myComponent extends Component {
    render() {
        return (
            <View>
                 <Text onPress={() => {this.input.focus()}}>Click Me</Text>
                 <Input ref={input => { this.input = input}}/>
            </View>
        )
    }
}

我正在使用基于本机的组件...不确定这是否会影响到此。当我按下文本组件时，我收到一条错误消息：_this2.input.focus is not a function. (In '_this2.input.focus()', '_this2.input.focus' is undefined)

Answer 1

我没有使用native-base，但正常情况下应该是这样的：

import * as React from 'react';
import { Text, View, StyleSheet, TextInput, Dimensions } from 'react-native';
import { Constants } from 'expo';

const { width, height } = Dimensions.get('window');

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text onPress={() => {this.input.focus()}}>Click Me</Text>
        <TextInput style={styles.input} ref={input => { this.input = input}}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  input: {
    backgroundColor: '#bbb',
    width: width - 40,
    height: 40,
    paddingHorizontal: 10,
    paddingVertical: 5,
  }
});

点心可以看这里：https://snack.expo.io/@gasparteixeira/inputfocus

Answer 2

export default class myComponent extends Component {
  public textInput: TextInput | null = null;

  render() {
    return (
        <View>
             <Text onPress={() => {this.textInput.focus()}}>Click Me</Text>
             <TextInput ref={input => (this.textInput = input as any)}/>
        </View>
    );
  }
}

Answer 3

export default class myComponent extends Component {
    render() {
        return (
            <View>
                 <Text onPress={() => {this.input.focus()}}>Click Me</Text>
                 <Input ref={ref => (this.textinput= ref)}/>
            </View>
        )
    }
}

并使用这个：

handleTextInput = () => {
    this.textinput....
 };

Answer 4

以防有人在 React 和 React Native 的 Hooks 时代遇到这个堆栈溢出。

遵循 React 文档的 Hooks 解决方案 https://reactjs.org/docs/hooks-reference.html#useref

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

React Native - 单击文本时如何使用 ref 将焦点设置到输入

React Native - How to use a ref to set focus to an input when clicking on text

react-native

native-base