使用typescript将React Native中的UseState传递给输入框组件并在onChange上更新它

Question

我在将使用状态传递给自定义文本输入时遇到了一些问题component.I 想要在用户每次在输入框中进行更改时更新符号的状态。使用状态符号未更新并返回为未定义。

App.tsx

    const App = () => {
    
    const [symbol, setSymbol] = useState('AMD');
    
    
       function handleSymbolChange() {
        setSymbol(symbol);
      }
    
    return (
    <View>
      <AppTextInput placeholder="Symbol" icon="activity" value={symbol} 
      onTextInputChange= {handleSymbolChange}/>
    </View>
  );
};
    }

AppTextInput.tsx

 interface Props {
      icon: string;
      placeholder: string;
      value: string;
      onTextInputChange: any;

}

    const AppTextInput: React.FC<Props> = ({
      icon,
      placeholder,
      value,
      onTextInputChange,
    }) => {
     
       const handleChange = (e: any) => {
        onTextInputChange(e.target.value);
        console.log(e.target.value);
      };
    
      return (
        <View>
            <Icon name={icon} size={20}/>
     
          <TextInput
            style={styles.textInput}
            placeholder={placeholder}
            value={value}
            onChange={handleChange}
          />
        </View>
      );
    };

Answer 1

您的代码未按预期工作的原因有 2 个。

第一个原因是 onTextInputChange 正在传回一个值，e.target.value 但您没有在 handleSymbolChange 回调中使用该值。您可能应该将 handleSymbolChange 函数更改为如下内容：

function handleSymbolChange(value: string) {
  setSymbol(value);
}

第二个原因是您没有正确使用 onChange TextInput 回调的 e 参数。如果您查看文档，您会发现 onChange 回调需要一个具有以下属性的对象：{ nativeEvent: { eventCount, target, text} } 作为参数，而您使用的是 e.target.value。为了使其正常工作，您需要将其更改为如下内容：

import {
  NativeSyntheticEvent,
  TextInput,
  TextInputChangeEventData,
  View,
} from 'react-native';

const App = () => {
  const handleChange = ({
    nativeEvent: { text },
  }: NativeSyntheticEvent<TextInputChangeEventData>) => {
    onTextInputChange(text);
  };

  return (
    <View>
      <TextInput onChange={handleChange} />
    </View>
  );
};

或使用 onChangeText 属性代替：

import { TextInput, View } from 'react-native';

const App = () => {
  const handleChange = (text: string) => {
    onTextInputChange(text);
  };

  return (
    <View>
      <TextInput onChangeText={handleChange} />
    </View>
  );
};

使用typescript将React Native中的UseState传递给输入框组件并在onChange上更新它

Passing UseState in React Native with typescript to Input box component and updating it onChange

onchange

typescript

reactjs

react-native

react-native-textinput