textarea
ユーザーが入力するとサイズが大きくなる単純なReactコンポーネントがあります。関数は次のようになります。
changeHeight(e) {
const height = this.textarea.clientHeight;
const scrollHeight = this.textarea.scrollHeight;
if (height < scrollHeight) {
this.textarea.style.height = scrollHeight + "px";
}
}
onKeyUp
テキストエリアでこの関数を呼び出すと正常に動作しますが、変更すると関数onPaste
が呼び出されますが (console.log で何かをログに記録した場合)、期待どおりにテキストエリアに高さが追加されません。
私がここで見逃している明らかなものはありますか?
完全なコードは次のとおりです。
class Textarea extends React.Component {
constructor(props) {
super(props);
this.changeHeight = this.changeHeight.bind(this);
}
changeHeight(e) {
const height = this.textarea.clientHeight;
const scrollHeight = this.textarea.scrollHeight;
if (height < scrollHeight) {
this.textarea.style.height = scrollHeight + "px";
}
console.log("changeHeight");
}
render() {
const {input, label, type, optional, value, helperText, meta: { touched, error }, ...custom } = this.props;
return (
<div className="measure mb4">
<label for="name" className="f6 b db mb2">{label} {optional ? <span className="normal black-60">(optional)</span> : null}</label>
<textarea onPaste={this.changeHeight} ref={(el) => { this.textarea = el; }} className={"input-reset ba b--black-20 pa2 mb2 db w-100 border-box lh-copy h5 animate-h"} aria-describedby="name-desc" {...input} {...custom} value={value} />
{touched && error ? <small id="name-desc" className="f6 red db mb2">{error}</small> : null}
{helperText ? <small id="name-desc" className="f6 black db mb2">{helperText}</small> : null}
</div>
)
}
}