将 textInput 元素移动到单独的组件
move textInput element to a separate component
我有一个屏幕,我用这个 :
const [searchText, setSearchText] = useState('');
<Item rounded style={styles.inputItem}>
<Icon
name="search"
size={moderateScale(18)}
color="#bdbdbd"
style={styles.icon}
/>
<Input
autoFocus={true}
autoCapitalize="none"
style={styles.inputField}
placeholder="Friend Search"
keyboardType="default"
onChangeText={(text: string) => {
setSearchText(text);
}}
/>
</Item>
我不想在当前屏幕上使用 Input 元素,而是想将它变成一个可重用的组件。像这样:
type SearchInputProps = {
handleChange?: any;
};
export const SearchInput: React.FunctionComponent<SearchInputProps> = (handleChange) => {
return (
<Item rounded style={styles.inputItem}>
<Icon name='search' size={moderateScale(18)} color="#bdbdbd" style={styles.icon}/>
<Input
autoFocus={true}
autoCapitalize="none"
style={styles.inputField}
placeholder="Friend Search"
onChangeText={()=>handleChange}
/>
</Item>
);
};
但是,我无法弄清楚如何使 onChangeText
工作,以便可以在那里设置主屏幕中的 const [searchText, setSearchText] = useState('');
值。有可能吗?
我想在这里创建一个小吃展,但我无法安装原生基础https://snack.expo.io/@nhammad/curious-bubblegum
编辑:
设法解决了类型错误,但仍然不知道如何在调用组件时传递 setSearchText
。
type SearchInputProps = React.PropsWithRef<{
handleChange?: any;
}>;
export const FieldInput = React.forwardRef<Input, SearchInputProps>(
({ handleChange }) => {
return (
<Item rounded style={styles.inputItem}>
<Icon
name="search"
size={moderateScale(18)}
color="#bdbdbd"
style={styles.icon}
/>
<Input
autoFocus={true}
autoCapitalize="none"
style={styles.inputField}
placeholder="Friend Search"
keyboardType="default"
onChangeText={handleChange}
/>
</Item>
);
},
);
本质上,您没有正确调用函数。更改您的 onChangeText
行:
onChangeText={()=>handleChange}
至:
onChangeText={handleChange}
或:
// Use this if you need to pass extra parameters from the child (SearchInput) component.
onChangeText={(event) => handleChange(event, <extra params>)}
您可以创建可重用的 Input
组件,方法是在组件内部包含常见行为,然后通过 props 将 API 暴露给消费者组件。这是一个 Snack 示例。请检查组件文件夹中的 Input
组件。
import React, {useState} from 'react';
import { StyleSheet, Text, TextInput as RnTextInput, View } from 'react-native';
const Input = ({label, onFocus, ...rest}) => {
const [isFocussed, setIsFocussed] = useState(false);
const handleFocus = () => {
setIsFocussed(true);
onFocus && onFocus();
};
return (
<View style={[styles.container, isFocussed && styles.inputFocused]}>
<Text style={styles.label}>{label}</Text>
<RnTextInput
style={styles.input}
onFocus={handleFocus}
{...rest}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
margin: 5,
borderBottomWidth: 1,
borderBottomColor: '#d3d3d3',
},
label: {
color: 'red',
},
input: {
height: 40,
fontSize: 16,
paddingLeft: 10,
},
inputFocused: {
borderBottomColor: 'blue'
}
})
export default Input;
然后像这样使用组件:
<Input
label="Enter Name"
onChangeText={text => onChangeText(text)}
onFocus={handleOnFocus}
placeholder="Enter some value"
value={value}
/>
注意:我使用了内置的 React Native TextInput
,但根据我的初步印象,native-base
的 Input
与 RN TextInput
具有相同的 API .
我有一个屏幕,我用这个 :
const [searchText, setSearchText] = useState('');
<Item rounded style={styles.inputItem}>
<Icon
name="search"
size={moderateScale(18)}
color="#bdbdbd"
style={styles.icon}
/>
<Input
autoFocus={true}
autoCapitalize="none"
style={styles.inputField}
placeholder="Friend Search"
keyboardType="default"
onChangeText={(text: string) => {
setSearchText(text);
}}
/>
</Item>
我不想在当前屏幕上使用 Input 元素,而是想将它变成一个可重用的组件。像这样:
type SearchInputProps = {
handleChange?: any;
};
export const SearchInput: React.FunctionComponent<SearchInputProps> = (handleChange) => {
return (
<Item rounded style={styles.inputItem}>
<Icon name='search' size={moderateScale(18)} color="#bdbdbd" style={styles.icon}/>
<Input
autoFocus={true}
autoCapitalize="none"
style={styles.inputField}
placeholder="Friend Search"
onChangeText={()=>handleChange}
/>
</Item>
);
};
但是,我无法弄清楚如何使 onChangeText
工作,以便可以在那里设置主屏幕中的 const [searchText, setSearchText] = useState('');
值。有可能吗?
我想在这里创建一个小吃展,但我无法安装原生基础https://snack.expo.io/@nhammad/curious-bubblegum
编辑:
设法解决了类型错误,但仍然不知道如何在调用组件时传递 setSearchText
。
type SearchInputProps = React.PropsWithRef<{
handleChange?: any;
}>;
export const FieldInput = React.forwardRef<Input, SearchInputProps>(
({ handleChange }) => {
return (
<Item rounded style={styles.inputItem}>
<Icon
name="search"
size={moderateScale(18)}
color="#bdbdbd"
style={styles.icon}
/>
<Input
autoFocus={true}
autoCapitalize="none"
style={styles.inputField}
placeholder="Friend Search"
keyboardType="default"
onChangeText={handleChange}
/>
</Item>
);
},
);
本质上,您没有正确调用函数。更改您的 onChangeText
行:
onChangeText={()=>handleChange}
至:
onChangeText={handleChange}
或:
// Use this if you need to pass extra parameters from the child (SearchInput) component.
onChangeText={(event) => handleChange(event, <extra params>)}
您可以创建可重用的 Input
组件,方法是在组件内部包含常见行为,然后通过 props 将 API 暴露给消费者组件。这是一个 Snack 示例。请检查组件文件夹中的 Input
组件。
import React, {useState} from 'react';
import { StyleSheet, Text, TextInput as RnTextInput, View } from 'react-native';
const Input = ({label, onFocus, ...rest}) => {
const [isFocussed, setIsFocussed] = useState(false);
const handleFocus = () => {
setIsFocussed(true);
onFocus && onFocus();
};
return (
<View style={[styles.container, isFocussed && styles.inputFocused]}>
<Text style={styles.label}>{label}</Text>
<RnTextInput
style={styles.input}
onFocus={handleFocus}
{...rest}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
margin: 5,
borderBottomWidth: 1,
borderBottomColor: '#d3d3d3',
},
label: {
color: 'red',
},
input: {
height: 40,
fontSize: 16,
paddingLeft: 10,
},
inputFocused: {
borderBottomColor: 'blue'
}
})
export default Input;
然后像这样使用组件:
<Input
label="Enter Name"
onChangeText={text => onChangeText(text)}
onFocus={handleOnFocus}
placeholder="Enter some value"
value={value}
/>
注意:我使用了内置的 React Native TextInput
,但根据我的初步印象,native-base
的 Input
与 RN TextInput
具有相同的 API .