常連

注目の的

質問力

支持者

textareaが自動で改行できるようになっています。
高さが100pxまでいった時にdivタグとtextareaの高さが100pｘより大きくならないために以下のように実装しました。
しかし写真のように100px以上になった時にdivタグは100px以上にはならないのですがtextareaが自動で改行されて１００ｐｘ以上となってしまいます。
どう修正したらいいのでしょうか？
ご教授お願いしたいです。

```ここに言語を入力
import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
import styled from 'styled-components';

type TArea = {
  parent: number;
  texth: number;
};
const TextAreaA = styled.div<TArea>`
  padding: 12px 12px;
  height: 28px;
  background: #e1e6ed;
  border-radius: 24px;
  min-height: ${({ parent }: TArea) => (parent <= 100 ? parent : 100)}px;
  textarea {
    width: 100%;
    resize: none;
    height: ${({ texth }: TArea) => texth}px;
    ::-webkit-resizer {
      display: none;
    }
  }
`;

type Props = {
  text: string;
   onHandleChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
};

export const TextArea: FunctionComponent<Props> = ({
  text,
  isShowPreviewCard,
}) => {
  const textAreaRef = useRef<HTMLTextAreaElement>(null);
  const [textAreaHeight, setTextAreaHeight] = useState('auto');
  const [parentHeight, setParentHeight] = useState('auto');

  useEffect(() => {
    setParentHeight(`${textAreaRef.current!.scrollHeight}`);
    setTextAreaHeight(`${textAreaRef.current!.scrollHeight}`);
  }, [text]);

  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setTextAreaHeight('auto');
    setParentHeight(`${textAreaRef.current!.scrollHeight}`);
    onHandleChange(e);
  };

  return (
    <TextAreaA parent={Number(parentHeight)} texth={Number(textAreaHeight)}>
      <textarea
        ref={textAreaRef}
        rows={1}
        onChange={onChangeHandler}
        value={text}
      />
    </TextAreaA>
  );
};

```
![イメージ説明](03c467ba11c6205a095d29c7320c4125.png)

textarea 高さの最大を决めたい

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>
  );
};

```

textarea 動かない

開発環境はreact.js, typescript, next.js, styled-componentsを使っています。


セレクトボックスのコードは以下になります。
https://codesandbox.io/s/q289304-t4z0w?file=/src/SelectDate.tsx


上記のコードのSelectDateの下にdivタグを用意してSelectDateのプルダウンを表示するとdivタグの上にプルダウンが重ならず下にずれてしまいます。SelectDateにz-indexをつけましたが前面に表示されませんでした。
プルダウンが前面に表示されるにはどうしたらいいでしょうか？
わかる人いましたらご教授お願いしたいです。

```ここに言語を入力
<SelectDate>//省略</SlelectDate>
<div>テスト</div>
```

react セレクトボックスのプルダウンを前面に表示するようにしたい

inputの入力時にstateに値を保存したくhandleInputSearchName、handleInputSearchAge,handleInputSearchCompanyという3つの関数を作りました。
保存されるstateが違うだけで処理が一緒なので関数をまとめてあげたいのですがどうしたらいいでしょうか？

わかる人いましたらご教授お願いしたいです。


```ここに言語を入力
import React, { FunctionComponent } from "react";
import styled from "styled-components";

interface ISearch {
  name: string;
  age: string;
  copmpany: string;
}

interface IState {
　message: string
  searchState: ISearch[];
}

export const User: FunctionComponent = () => {
  const [state, setState] = useState<IState>({
　　message,
    searchState: [],
  });

  const handleInputSearchName = (e:React.ChangeEvent<HTMLInputElement>) => {
    setState({ ...state, ...{ searchState: {name: e.target.value } } });
  };
  const handleInputSearchAge = (e:React.ChangeEvent<HTMLInputElement>) => {
    setState({ ...state, ...{ searchState: { age: e.target.value } } });
  };
  const handleInputSearchCompany = (e:React.ChangeEvent<HTMLInputElement>) => {
    setState({ ...state, ...{ searchState: { company: e.target.value } } });
  };

  return (
    <div>
        <Input onClick={() => handleInputSarchName}>{name}</input>
        <Input onClick={() => handleInputSarchAge}>{age}</input>
        <Input onClick={() => handleInputSarchCompany}>{company}</input>
    </div>
  );
};

```

react stateに値を保存する関数をまとめたい

youtubeの動画を見ながら学習していてわからないことがあったので質問させていただきます。

[https://www.youtube.com/watch?v=NomcZddqBfs](https://www.youtube.com/watch?v=NomcZddqBfs)

上記のURLの9:04くらいのとこで目のアイコンにposition: absoluteを指定しているのですが指定したら目のアイコンの位置が右側になっています。
position: absoluteは絶対位置なので画面の左上になると思うのですがなぜ右側に配置されたのかがよくわかりません。
わかるかたがいましたら教えて欲しいです。
よろしくお願いします

positon absolute の位置設定

環境
・ react
・ typescript
・ styled-components

幅いっぱいまであるときに文字数が多かったら改行してあげたくスタイルにword-break: break-all;をつけてあげているのですが改行されず,{introduction}が横に表示されてしまいます。
画像のように赤枠のとこをはみ出して横に表示されてしまっている。
どこがおかしいのかがわかりません。
わかる人いましたらご教授お願いしたいです。
![イメージ説明](09616ab190207194e2f0340042d72eae.png)

```ここに言語を入力
import { TextField } from "components/atoms/TextField";
import { UserHeader } from "components/organisms/UserHeader";
import React, { FunctionComponent } from  “react

const SectionItem1 = styled.section`
overflow-y: auto;
padding: 24px 16px;
`;

const SectionItem2 = styled.section`
padding: 24px;
overflow-y: auto;
`;

const SectionItem3 = styled.section`
padding: 24px;
overflow-y: auto;
`;

const LabelStyle = styled.div`
  width: 100%;
  background: red;
  border-radius: 4px;
  word-break: break-all;
  grid-auto-columns: max-content;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 8px;
  align-items: center;!
`;

export const Message: FunctionComponent<Props> = () => {

const introducrion =
"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
return (
  <MainContainer>
    <SectionItem1 />
    <SectionItem2 />
    <SectionItem3>
      <UserHeader
        name={"佐藤"}
        job={"学生"}
      />
     <LabelStyle height={100}>{introduction}</LabelStyle>
     <TextField />
   </SectionItem3>
  </MainContainer>
  );
};

```