在Modal中反应本机纸张TextInput，输入字符后光标向后闪烁

debugcn 发表于 Dev

RiddleRiddlerRddler

React Native Paper中模态上的TextInput上的某些奇怪行为。当我键入一个字符时，它会被输入到文本框中，但随后光标会闪回（好像已被删除），然后再次出现。这一切发生得非常快，并且保留了角色，但是看起来有点过时。下面的Gif来说明：

对于模态而言，代码非常简单：

import { Portal, Modal, Button, Title, Text, TextInput } from 'react-native-paper'; 

const [nameNew, setNameNew] = useState('')
const [emailNew, setEmailNew] = useState('')

const renderModalAddPerson = () => {
    return (
      <Portal>
        <Modal visible={visibleModalAddPerson} onDismiss={closeModalAddPerson} contentContainerStyle={styles.modalContainer}>
          <View>
            <Title style={{alignSelf:'center'}}>Title here</Title>
            <Text>  </Text>
            <TextInput
              mode="outlined"
              label="Name"
              style={{alignSelf:'center', width:'95%'}}
              value={nameNew}
              onChangeText={nameNew => setNameNew(nameNew)}
              ref={input1}
              returnKeyType='next'
              blurOnSubmit={false}
              onSubmitEditing={() => input2.current.focus()}
            />
            <TextInput
              mode="outlined"
              label="Email"
              style={{alignSelf:'center', width:'95%'}}
              value={emailNew}
              onChangeText={emailNew => setEmailNew(emailNew)}
              ref={input2}
              returnKeyType='done'
              blurOnSubmit={false}
              onSubmitEditing={() => addPerson()}
            />
            <Button
              uppercase={false} 
              style={{backgroundColor:'#2c3e50', width: '95%', alignSelf:'center', margin: 10}} 
              labelStyle={{color:'white'}}
              onPress={()=>addPerson()}
            >Add person</Button>
          </View>
        </Modal>
      </Portal>
    );
  };

在iOS上观察到但未在Android上测试的问题

RiddleRiddlerRddler

看起来这是React Native中的一个已知错误。我发现最好的解决方案是使用defaultValue属性代替值。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。