TextInput React National无法使用OnChangeText

Question

该文本不会在屏幕{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;

Answer 1

您需要将价值传递给Onchangeaccount。您不会传递任何东西。

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

更新：
您无需像现在这样做的那样将道具传递给外部textinputContainer组件。另外，您正在尝试从功能中的道具中解构帐户和Onchangeaccount。除了您没有将这些属性传递给您的功能外，它可能会引起冲突，因为您已经定义了此类函数/变量名称。您可以从外部textinputContainer常数函数中删除这些道具。

此外，关于驳回键盘问题：
之所以发生这种情况，是因为您将常数函数用作主组件内部的组件。每次输入字符时，这会导致重新启动组件，然后键盘被删除。您可以在textInputscreen之外定义组件，然后将其导入。或使用externalTextinputContainer作为函数。因此，您需要这样称呼它：

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

有关更多信息，您可以阅读此信息： stackoverflow.com/a/a/60048240/525747777

Answer 2

它是因为您将任何道具传递给外部textinputContainer组件。

更改此：

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

Answer 3

只是改变一点：

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

Answer 4

我在上面得到了帮助，问题是由于文本输入是一个组件而引起的，并且每次都会重新呈现，每次引起键入并在键入后忽略键盘。解决方案是将组件转换为函数或从组件文件夹导入组件。

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