0

我想要实现的是在单击父文件中存在的图标时关注子组件中存在的 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>

);

4

1 回答 1

0

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

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

   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)}
    />
于 2021-04-02T05:25:20.763 回答