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="親!寫點建議吧,您的寶貴建議將對咱們改善園區體驗有很大幫助喲!"
/>
相關文章
相關標籤/搜索