单击 React Native 中父文件中的图标，我如何才能专注于子文件中的文本字段？

Question

我想要实现的是在单击父文件中存在的图标时关注子组件中存在的 TextInput。我尝试过使用 refs 和 forward refs，但这意味着我必须将组件包装在我试图避免的 forwardref 中。

 const InputText = React.forwardRef((props, ref) => (
 <input ref={ref} {...props} />
  ));

我的子文件如下所示：

export const TextField = ({
    label,
    placeholder = "",
     id = "",
  isSecure = false,
   disabled = false,
   handleBlur,
   handleChange,
  value,
   ...props
   }: IProps): React.ReactElement => {
    const { labelStyle, fieldStyle, status=false, search=false,inputStyle, errorStyle } = 
        props;


   //some statements


  <View style={styles.elementsContainer}>
    <TextInput                                   //I want to focus on this
      .......
       .
       .
      onChangeText={handleChange(props.name)}
      onBlur={handleBlur(props.name)}
    />
</View>
);
};
export default TextField;

下面是我的父文件，其中有一个图标，单击它我尝试聚焦此文本字段。

return (
<Formik
  initialValues={initialValues}
  onSubmit={(values, { setSubmitting }) => {
    setSubmitting(false);
  }}
>
  {(formikProps: FormikProps<{ searchText: string }>) => (
    <View style={status?styles.highlight:[styles.container,textFieldDimensions]}>
      <TouchableOpacity onPress={addressFocus}>             //This is the icon on click of it i am trying textfield child component to be focused.
         <Icon testID="home" name={IconNames.home} />         
     </TouchableOpacity>
     <View style={styles.textfieldContainer}>
    <TextField                                              //CHild component
      handleChange={formikProps.handleChange}
      status={status}
      handleBlur={() => searchFunction(formikProps.values.searchText)}
      value={formikProps.values.searchText}
      name="searchText"
      placeholder={placeholder}
      search={search}
      label="Search :"
      id="searchText"
      fieldStyle={[styles.field,fieldStyle]}
      inputStyle={styles.input}
      labelStyle={[styles.label, labelStyle]}
    />
    </View>
    </View>
  )}
</Formik>

);

Answer 1

经过头脑风暴后，我得出了一个目前对我有效的简单方法。但我不是 crystal 从参考部分清楚它是如何工作的。

所以我所做的是在父文件中，我在其中传递子组件中的道具，如下所示：

   const toggle=()=>{
    setToggler(!toggler)                     This function changes state value which is boolean type from false to true and vice versa.
        }
<TouchableOpacity onPress={toggle}>           //toggle function called on onPress
         <Icon testID="home" name={IconNames.home} />
     </TouchableOpacity>
 <TextField
      toggler={toggler}                       //Now I am passing state toggler into child component, change of this state will re render the component
      handleChange={formikProps.handleChange}
      status={status}
      handleBlur={() => searchFunction(formikProps.values.searchText)}
      value={formikProps.values.searchText}
      name="searchText"
      placeholder={placeholder}
      search={search}
      label="Search :"
      id="searchText"
      fieldStyle={[styles.field,fieldStyle]}
      inputStyle={styles.input}
      labelStyle={[styles.label, labelStyle]}
    />

现在我在子组件中处理引用的方式是它专注于单击按钮时的文本输入。

所有这些都发生在功能组件中，为简单起见，没有考虑反应规则，只显示了相关的代码片段

 const inputRef = useRef<TextInput>(null);
 const onClickFocus = () => {
     {props.toggler && inputRef.current?.focus();}  //If toggler changes to true then this function will execute and perform inputRef.current?.focus();
   }
  onClickFocus()  //Function is called here and later inputRef is utilized in textinput as ref={inputRef}
 <TextInput
      ref={inputRef}
      placeholder={placeholder}
      secureTextEntry={isSecure}
      style={search?  fieldStyle:[styles.inputBox, inputStyle]}
      editable={!disabled}
      value={value}
      {...field}
      onChangeText={handleChange(props.name)}
      onBlur={handleBlur(props.name)}
    />

单击 React Native 中父文件中的图标，我如何才能专注于子文件中的文本字段？

How can i focus on textfield in child file on click of an icon which is in parent file in react native?

javascript

reactjs

react-native

refs

react-forwardref