Question

我实际上是这样的TextInput：

    <TextInput
      onChange={(event) => {
        this.setState({
          text: event.nativeEvent.text,
          height: event.nativeEvent.contentSize.height,
        });
      }}
      editable={!this.state.load}
      style={{height: this.state.inputFocused == true || this.state.text.length > 0 || this.state.picture.uri != undefined ? Math.max(height / 11.8, this.state.height) : height / 2.5, width: width, backgroundColor: 'white', fontFamily: 'Aller', fontSize: width / 24, padding: width / 38, alignItems: 'flex-start', justifyContent: 'flex-start', textAlignVertical: 'top',}} 
      multiline={true}
      value={this.state.text}
/>

我使用此TextInput添加内容，但也使用编辑，因此我使用TextInput和height中的默认值初始化使用它的类并且textInput的高度不会自动调整正如我所愿。

那么如何在不使用任何事件的情况下使textInput中的文本占用高度呢？

Answer 1

此解决方案使用一个事件，但是它可以执行您想要的操作。您可以使用onContentSizeChange来初始化TextInput的高度并保持其更新。

<TextInput
    onContentSizeChange={(event) => {
        this.setState({ 
            height: event.nativeEvent.contentSize
        });
    }}
    style={{ height: this.state.height }} 
/>

使用钩子将是：

const [ height, setHeight ] = useState();

<TextInput
    onContentSizeChange={(event) => {
        setHeight(event.nativeEvent.contentSize.height)
    }}
    style={{ height }} 
/>

在不使用事件的情况下获取TextInput高度

1 个答案: