React原生文本输入,每当输入字符时,文本就会跳转

q8l4jmvw  于 2023-04-22  发布在  React
关注(0)|答案(3)|浏览(155)

下面的视频解释了https://www.loom.com/share/c9144a0877b1460c8c02c301afdc3029上发生了什么。当输入文本时,文本中有一个明显的跳跃。这就是文本输入的代码。我已经尝试了scrollenabled=false。欢迎任何想法。

<TextInput
        placeholder={'What do you want to talk about?'}
        placeholderTextColor={'#9A9A9A'}
        onChangeText={onChangeText}
        multiline={true}
        autoFocus={true}
        scrollEnabled={true}
        style={[styles.textInputPost, postVideoUri.length > 0 || postImage.length > 0 ? { height: '20%' } : {}]}
      />
3mpgtkmj

3mpgtkmj1#

可能是因为你使用了useState钩子来管理状态,所以发生了一些重新呈现的情况,这就是为什么会发生这种情况。也许可以试试这样的方法。希望它能有所帮助。

const [postText, setPostText] = useState('');
  const [postVideoUri, setPostVideoUri] = useState('');
  const [postImage, setPostImage] = useState('');

  const onChangeText = useCallback((text) => {
    setPostText(text);
  }, []);

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="What do you want to talk about?"
        placeholderTextColor="#9A9A9A"
        onChangeText={onChangeText}
        multiline
        autoFocus
        scrollEnabled
        style={[
          styles.textInputPost,
          postVideoUri.length > 0 || postImage.length > 0 ? { height: '20%' } : {},
        ]}
      />
    </View>
  );
btxsgosb

btxsgosb2#

它的行为是这样的,因为你可能会在更改时直接调用setState()函数,这会在每次编辑文本输入内容时触发重新渲染。对于TextInputs,我建议使用React-Hook-Form库,并使用Controller使其成为受控输入,那么它应该可以正常工作。

izj3ouym

izj3ouym3#

好的,我找到了一个解决方案。它有两个组成部分。
1.对onchangeText函数使用useCallback()。
1.为textInput字段提供宽度组件。这对于解决方案的工作至关重要。有了这两件事,它就不会跳转。

textInputPost: {
fontFamily: 'Montserrat',
fontSize: 18,
lineHeight: 30,
alignItems: 'flex-start',
justifyContent: 'flex-start',
height: '38%',
**width: windowWidth - 40,**
paddingRight: 20,

},

相关问题