react textarea高度自适应

this.state = {
    textareaValue: '',
};

 handleValueChange = (e) => {
    let height = parseInt(getComputedStyle(e.target).height.slice(0, -2), 10);
    if (e.target.scrollHeight > height) {
        e.target.style.height = `${e.target.scrollHeight + borderTop + borderBottom}px`;
    } else {
        while (height >= e.target.scrollHeight) {
            e.target.style.height = `${height - lineHeight}px`;
            height -= lineHeight;
        }
        e.target.style.height = `${height + lineHeight}px`;
    }
    this.setState({
        textareaValue: e.target.value,
    });
};

const { textareaValue } = this.state;

<textarea
    style={{
        width: '100%',
        border: 'none',
        outline: 'none',
        lineHeight: '20px',
    }}
    value={textareaValue}
    onChange={this.handleValueChange}
    placeholder="亲！写点建议吧，您的宝贵建议将对我们改善园区体验有很大帮助哟！"
/>

转载于:https://my.oschina.net/u/3913691/blog/3068864