Блог

У меня есть пользовательский многострочный ввод текста, который автоматически увеличивается / расширяется в соответствии с его содержимым:

     import React, { useState } from 'react'
    import { TextInput } from 'react-native'
    
    export function MyInput() {
        const [value, setValue] = useState('Sample')
        const [height, setHeight] = useState(56)
        return (
            <TextInput
                value={value}
                onChangeText={text => {
                    setValue(text)
                }}
                onContentSizeChange={event => {
                    setHeight(Math.max(56, event.nativeEvent.contentSize.height))
                }}
                multiline
                style={{
                    padding: '16px',
                    height: height   'px'
                }}
            />
        )

}
 

Однако, если он уже расширен до нескольких строк и я удаляю его содержимое, onContentSizeChange не запускается, и пустые строки не удаляются автоматически. Есть ли способ это исправить? Спасибо!

Я нашел два способа уменьшить ввод:

1. Добавьте границу TextInput в реквизит стиля, например:

 borderWidth: 0.5, // any value is required
borderColor: "transparent"
 

2. Используйте onChange обратный вызов вместо onContentSizeChange в TextInput (первоначально размещенном здесь):

 onChange={(e) => {
  e.nativeEvent.target.style.height = 0;
  e.nativeEvent.target.style.height = `${e.nativeEvent.target.scrollHeight}px`;
}}