Antd Mobile TextareaItem的autoHeight失效

问题描述

TextareaItem里面存了一段很长的文字，设置了autoheight，但是需要用鼠标点一下才能展开

问题解决

获取textarea实例，强制获取焦点

**
 * title: 通知详情
 */
import React, { Component } from 'react';
import { connect } from 'dva';
import { TextareaItem } from 'antd-mobile';

import styles from './detail.less';
import NavbarComponent from '../../../components/NavBar';

@connect((state) => ({
  global: state.global,
  tzgg: state.tzgg
}))
class NoticeDetailPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formatNotice: '',
    };
    this.textAreaRef = React.createRef();
  }

  componentDidMount = () => {
    this.handleRequest();
    this.textAreaRef.current.focus();
  };

  // 通知公告详情
  handleDetail = () => {

  };

  // 请求数据
  handleRequest = () => {
    const { dispatch, location: { state={} } } = this.props;
    dispatch({
      type: `tzgg/queryNoticeById`,
      payload: {
        id: state.id
      },
      callback: (res) => {
        this.setState({
          formatNotice: res.formatNotice
        });
      }
    });
  };

  render() {
    const { formatNotice } = this.state;

    return (
      <div className={styles['main-container']}>
        <NavbarComponent />

        <div className={styles.container}>
          <TextareaItem
            autoHeight
            ref={this.textAreaRef}
            editable={false}
            value={formatNotice}
          />
        </div>
      </div>
    );
  }
}

export default NoticeDetailPage;

主要代码

this.textAreaRef = React.createRef();
this.textAreaRef.current.focus();
ref={this.textAreaRef}