React Native Paper TextInput in Modal，输入字符后光标向后闪烁答案

【问题标题】：React native paper TextInput in Modal, cursor flashes backwards after a character is inputReact Native Paper TextInput in Modal，输入字符后光标向后闪烁
【发布时间】：2021-03-03 09:22:49
【问题描述】：

React Native Paper 中 Modal 上的 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 上测试过

【问题讨论】：

你所在的州是哪里？它只是从您的 sn-p 中丢失了吗？因为我以前见过这个，输入没有任何状态
抱歉，sn-p 错过了。我现在已将状态包含在 sn-p 中。
这是“正常”行为。建议您使用不受控制的行为。这意味着您省略 value={emailNew} 并仅在 addPerson() 中检索 emailNew。这允许您使用双空格（句点 .）行为也。

标签： javascript reactjs react-native react-native-paper react-native-modal

【解决方案1】：

看起来这是 React Native 中的一个已知错误。我发现的最佳解决方案是使用 defaultValue 属性而不是 value。

【讨论】：

【解决方案2】：

我唯一能看到的是，您使用与状态名称相同的变量名称来更新您的状态，这可能会导致一些奇怪的事情发生。

 <TextInput
          mode="outlined"
          label="Name"
          style={{alignSelf:'center', width:'95%'}}
          value={nameNew}
          onChangeText={val => setNameNew(val)}
          ref={input1}
          returnKeyType='next'
          blurOnSubmit={false}
          onSubmitEditing={() => input2.current.focus()}
        />

请尝试上述方法，因为我已经测试过，并且它按预期工作。

【讨论】：

它似乎没有任何区别。仍然有同样的问题。