TextInputReactNative無法在ChangeText上作業-有解無憂

螢屏 {account} 上的文本不會更新。當您在文本輸入中鍵入時，似乎未呼叫 onChangeAccount。我已經對其進行了解構，但除非我將文本放在應用程式回傳陳述句中，否則它不起作用。它鍵入一項作業，然后關閉鍵盤。

...
const TextInputScreen = () => {
    const [account, onChangeAccount] = React.useState(null);


const ExternalTextInputContainer =({account,onChangeAccount})=>{
  return(
    <TextInput
            style={styles.input}
        onChangeText={onChangeAccount}
        value={account}
    />
  )
}
  return (
    <SafeAreaView>
      />
      <Text>{account}</Text>
       <ExternalTextInputContainer value={account}  onChangeText={
      onChangeAccount} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default TextInputScreen;

uj5u.com熱心網友回復：

這是因為您沒有將任何道具傳遞給 ExternalTextInputContainer 組件。

改成這樣：

<ExternalTextInputContainer account={account} onChangeAccount={onChangeAccount} />

uj5u.com熱心網友回復：

您需要將值傳遞給 onChangeAccount。你沒有傳遞任何東西給它。

<TextInput
    style={styles.input}
    onChangeText={text=> onChangeAccount(text)}
    value={account}
/>

更新：您不需要像現在這樣將道具傳遞給 ExternalTextInputContainer 組件。此外，您正在嘗試從函式中的道具解構 account 和 onChangeAccount 。除了您不將此類屬性傳遞給您的函式之外，它可能會導致沖突，因為您已經定義了此類函式/變數名稱。您可以從 ExternalTextInputContainer 常量函式中洗掉這些道具。

另外，關于消除鍵盤問題：發生這種情況是因為您將常量函式用作主組件中的組件。這會導致每次您鍵入字符時重新渲染組件，然后您的鍵盤就會被關閉。您可以在 TextInputScreen 之外定義組件，然后將其匯入。或者使用 ExternalTextInputContainer 作為函式。所以，你需要這樣稱呼它：

return (
<SafeAreaView>
  />
  <Text>{account}</Text>
   {ExternalTextInputContainer()}
</SafeAreaView>
 );

有關更多資訊，您可以閱讀以下內容：stackoverflow.com/a/60048240/5257477

uj5u.com熱心網友回復：

稍微改變一下：

    const TextInputScreen = () => {
    const [account, setAccount] = React.useState('');


const ExternalTextInputContainer =({account,onChangeAccount})=>{
  return(
    <TextInput
            style={styles.input}
        onChangeText={onChangeAccount}
        value={account}
    />
  )
}
  return (
    <SafeAreaView>
      />
      <Text>{account}</Text>
       <ExternalTextInputContainer account={account}  onChangeAccount={
      text => setAccount(text)} />
    </SafeAreaView>
  );
};

uj5u.com熱心網友回復：

我在上面得到了幫助，問題是由于 textInput 是一個組件，它每次都會重新渲染，導致它在輸入后閃爍并關閉鍵盤。解決方案是將組件轉換為函式或從組件檔案夾中匯入組件。

const AccountView = () => {
    const [account, onChangeAccount] = React.useState(null);


const externalTextInputContainer =({account,onChangeAccount})=>{
  return(
    <TextInput
            style={styles.input}
        onChangeText={onChangeAccount}
        value={account}
    />
  )
}
  return (
    <SafeAreaView>
      {externalTextInputContainer({account,onChangeAccount})}
    </SafeAreaView>
  );
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/475096.html

標籤：反应式反应钩子改变文本输入解构

上一篇：i18next“t”變數的型別是什么（TYPESCRIPT）

下一篇：無法讀取未定義的屬性導航