如何在单击反应原生的父文件中的图标时专注于子文件中的文本字段？

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

因此，在集思广益之后，我得出了一个简单的方法，该方法对我现在有效。 但是我从参考部分不清楚它是如何工作的。

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

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