textarea 動かない

Question

https://medium.com/@lucasalgus/creating-a-custom-auto-resize-textarea-component-for-your-react-web-application-6959c0ad68bc

上記のサイトを参考にして自動で高さが変わるtextareaを作りました。
①のコードのスタイルをstyled-componentsでスタイルするように②のコードに直しました。
しかしstyled-componentsに直したらtextareaに入力しても何も入力されず、、、
デベロッパーツールで見てみましたがエラーの表記も出ていませんでした。

どこが原因で動かないのかがわからないのでわかる人いましたら教えて欲しいです。
よろしくお願いします。

//①

import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
import styled from 'styled-components';

const TextAreaA = styled.textarea`
  width: 100%;
  resize: none;
  ::-webkit-resizer {
    display: none;
  }
`;

export const TextArea: FunctionComponent = () => {
  const textAreaRef = useRef<HTMLTextAreaElement>(null);
  const [text, setText] = useState('');
  const [textAreaHeight, setTextAreaHeight] = useState('auto');
  const [parentHeight, setParentHeight] = useState('auto');

  useEffect(() => {
    setParentHeight(`${textAreaRef.current!.scrollHeight}px`);
    setTextAreaHeight(`${textAreaRef.current!.scrollHeight}px`);
  }, [text]);

  const onChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setTextAreaHeight('auto');
    console.log(textAreaHeight);
    // console.log(parentHeight);
    setParentHeight(`${textAreaRef.current!.scrollHeight}px`);
    setText(event.target.value);

    // if (props.onChange) {
    //   props.onChange(event);
    // }
  };

  return (
    <div
      style={{
        paddingTop: '12px',
        paddingBottom: '12px',
        paddingLeft: '12px',
        paddingRight: '12px',
        maxHeight: '208px',
        minHeight: parentHeight,
        height: '28px',
        background: '#E1E6ED',
      }}
    >
      <TextAreaA
        // {...props}
        ref={textAreaRef}
        rows={1}
        style={{
          height: textAreaHeight,
        }}
        onChange={onChangeHandler}
      />
    </div>
  );
};

//②

import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
import styled from 'styled-components';

type TArea = {
  parent: number;
  text: number;
};
const TextAreaStyle = styled.div<TArea>`
  padding: 12px 12px;
  height: 28px;
  border-radius: 24px;
  max-height: 208px;
  min-height: ${({ parent }: TArea) => parent}px;
  textarea {
    width: 100%;
    resize: none;
    height: ${({ text }: TArea) => text}px;
    display: none;
    ::-webkit-resizer {
      display: none;
    }
  }
`;

export const TextArea: FunctionComponent = () => {
  const textAreaRef = useRef<HTMLTextAreaElement>(null);
  const [text, setText] = useState('');
  const [textAreaHeight, setTextAreaHeight] = useState('auto');
  const [parentHeight, setParentHeight] = useState('auto');

  useEffect(() => {
    setParentHeight(`${textAreaRef.current!.scrollHeight}`);
    setTextAreaHeight(`${textAreaRef.current!.scrollHeight}`);
  }, [text]);

  const onChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setTextAreaHeight('auto');
    console.log(textAreaHeight);
    console.log(parentHeight);
    setParentHeight(`${textAreaRef.current!.scrollHeight}`);
    setText(event.target.value);

    // if (props.onChange) {
    //   props.onChange(event);
    // }
  };

  return (
    <TextAreaStyle parent={Number(parentHeight)} text={Number(textAreaHeight)}>
      <textarea
        // {...props}
        ref={textAreaRef}
        rows={1}
        onChange={onChangeHandler}
      />
    </TextAreaStyle>
  );
};

Answer 1

もしかすると、以下の部分のdisplay: none;のせいではないですか?

const TextAreaStyle = styled.div<TArea>`
  padding: 12px 12px;
  height: 28px;
  border-radius: 24px;
  max-height: 208px;
  min-height: ${({ parent }: TArea) => parent}px;
  textarea {
    width: 100%;
    resize: none;
    height: ${({ text }: TArea) => text}px;
    display: none; /*　←これ */
    ::-webkit-resizer {
      display: none;
    }
  }
`;

Answer 2

こんにちは。
以下の修正で、すべてが意図通り動くかどうかは分かりませんが、まずはtextを <textarea> で囲むように修正してみるといかがでしょうか？

  <textarea
    ref={textAreaRef}
    rows={1}
    onChange={onChangeHandler}
- />
+ >
+ {text}
+ </textarea>

修正前だと、textがどのように変わっても、<textarea> の innerText は空のまま、つまり何も表示されないということになると思われます。

Comments

[退会済みユーザー]

回答ありがとうございます。修正しましたが変わりませんでした

[jun68ykt]

コメントありがとうございます。
他に問題の原因になっていそうな箇所がみつかったら、また回答に追記するなどして、お知らせします。

[退会済みユーザー]

ご丁寧にありがとうございます！

[jun68ykt]

上記の回答で、

> 修正前だと、textがどのように変わっても、<textarea> の innerText は空のまま、つまり何も表示されないということになると思われます。

と書いたのは、私の勘違いでした。申し訳ないです。
私のローカルでの検証だと、nskhei　さんの回答にあるとおり

textarea {
width: 100%;
resize: none;
height: ${({ text }: TArea) => text}px;
display: none;
::-webkit-resizer {
display: none;
}
}

に含まれる、
display: none;
の行をとりあえず消去してみたら、textarea が表示されて、一応、それっぽく動きました。

[退会済みユーザー]

解決しました。ありがとうございます