javascript - 如何在单击反应原生的父文件中的图标时专注于子文件中的文本字段?
问题描述
我想要实现的是在单击父文件中存在的图标时关注子组件中存在的 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>
);
解决方案
因此,在集思广益之后,我得出了一个简单的方法,该方法对我现在有效。但是我从参考部分不清楚它是如何工作的。
所以我所做的是在父文件中,我在子组件中传递道具,如下所示:
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)}
/>
推荐阅读
- django - Django 查询集验证字段是否存在
- node.js - Sequelize limit 中断请求
- python - 跨子类共享类 int
- docker - Docker 容器间通信
- r - 以 dplyr 方式生成新的日期(星期)列,以便 SQL 可以正确翻译
- python - 'function' 对象没有属性 'fft2' 错误 scipy
- php - Gmail API - 无需登录 PHP 即可访问 api
- javascript - 从全屏开始时在 Angular 上退出全屏
- android - 使用 gradle 删除所有包含文件的目录
- javascript - Javascript不会改变CSS cheet中的样式