将 textInput 元素移动到单独的组件

Question

我有一个使用它的屏幕：

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>
    );
  },
);

Answer 1

本质上，您没有正确调用您的函数。更改您的 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>)}

Answer 2

您可以创建一个可重用的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。