如何在 React Native 中将 TextInput 集中在按钮按下上

Nan*_*bai 1 typescript react-native

我有一个 TextInput 组件,它只能在组件安装时编辑。当按下按钮时,它应该变得可编辑并自动聚焦。据我正确理解,该autoFocus属性仅在第一次安装时有效。有什么办法可以在状态改变时实现这一点吗?

import { FunctionComponent } from 'react';
import { View, TextInput, TextInputProps } from 'react-native';


interface InputTextBoxProps {
  editingState: boolean;
}

type InputProps = TextInputProps & InputTextBoxProps;

const InputTextBox: FunctionComponent<InputProps> = ({editingState, ...props}) => {
  return (
    <View>
      <TextInput
        {...props}
        multiline={true} 
        style={styles.textStyle}
        editable={editingState}
        autoFocus={editingState}
      >
      </TextInput>
    </View>
  );
};
Run Code Online (Sandbox Code Playgroud)

mai*_*nak 11

const refInput = React.useRef(null);
 ...
<TextInput
  {...props}
  ref={refInput}
  multiline={true} 
  style={styles.textStyle}
  editable={editingState}>
</TextInput>
Run Code Online (Sandbox Code Playgroud)

按钮点击功能

refInput.current.focus()
Run Code Online (Sandbox Code Playgroud)