Допускается ли такой подход что бы сделать textarea-autosize?

Question

[xXRustamXx]

Это противоречит концепции React, но библиотеку/компонент который подстраивает высоту поля не хочу подключать из-за какой-то textarea, когда можно сделать это самому, пробовал через setState задавать 2 высоты, одну по дефолту, а другую динамическую, но тщетно:

Comments

[Илья Герасимов]

Тут вполне можно так

onChange(e) {
    this.setState({ textareaHeight: e.target.scrollHeight });
}

<textarea
    style={{ height: this.state.textareaHeight }}
    ...

Но в целом подход вполне допустим, только стоит учитывать что реакт может затереть твои style назначенные таким способом

[xXRustamXx]

Илья Герасимов, Так как показываете вы, не будет работать, после того как напечатали какой-нибудь текст попробуйте стереть и будет подвох))

[Илья Герасимов]

xXRustamXx, не люблю рефы, но как вариант, если уж на то пошло))
https://jsfiddle.net/2u0kwdsn/9/

[Дмитрий]

Вообще сам вопрос странный. Если это работает и не имеет побочных эффектов, кем это должно допускаться или не допускаться?

Answer 1

[Alexprintme]

Как то так:

import React, { useEffect, useRef, useState} from "react";
const defaultStyle = {
    display: "block",
    overflow: "hidden",
    resize: "none",
    width: "100%",
    backgroundColor: "mediumSpringGreen"
};

const AutoHeightTextarea = ({ style = defaultStyle, ...etc }) => {
    const textareaRef = useRef(null);
    const [currentValue, setCurrentValue ] = useState("");

    useEffect(() => {
        textareaRef.current.style.height = "0px";
        const scrollHeight = textareaRef.current.scrollHeight;
        textareaRef.current.style.height = scrollHeight + "px";
    }, [currentValue]);

    return (
        <textarea
            ref={textareaRef}
            style={style}
            {...etc}
            value={currentValue}

            onChange={e=>setCurrentValue(e.target.value)}
        />
    );
};

export default AutoHeightTextarea;

Answer 2

[Mikhail Osher]

Теоретически – допускается. Нормально ли так писать – на мой взгляд, нет.
Я бы написал как-то так.

class Textarea extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {};
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({
      height: e.target.scrollHeight
    });
  }
  
  render() {
    const { height } = this.state;

    return (
      <div>
        <textarea 
          name="text"
          style={{ height }}
          placeholder="Autoresize textarea"
          onChange={this.onChange}
        />
      </div>
    )
  }
}

Comments

[xXRustamXx]

Так как показываете вы, не будет работать, после того как напечатали какой-нибудь текст попробуйте стереть и будет подвох))
P.S В вопросе написано про попытки setState

[xXRustamXx]

Если не нормально писать, то предложите альтернативу без плагинов)) А пока-что я буду считать что это норма.

[Mikhail Osher]

xXRustamXx, я показал про способ работы со состоянием компонента, нежели рабочее решение

[xXRustamXx]

Mikhail Osher, Смысл было показывать способ работы с стостоянием компонента? если я это знаю и в вопросе про это написал.....

[Mikhail Osher]

xXRustamXx, аххх) Надо мне внимательнее вопросы читать. Голова уже не работает вечером)