常連

注目の的

質問力

支持者

antdライブラリのInputコンポーネントを使っています。
初期値に３を入れているのですが初期値の３が表示されません。
<Form.Item>のname="input"を消すと初期値が表示されるようになるのですが10文字以上入力した時のエラ〜メッセージが表示されなくなりました。
解決方法わかる人いましたらご教授お願いしたいです。

[code](https://codesandbox.io/s/adoring-tree-xe4xm?file=/src/App.js:736-758)

```
const App = () => {
  const [value, setValue] = React.useState(null);
  const [onSave, setOnSave] = React.useState(null);
  const handleInputChange = React.useCallback((e) => {
    setValue(Number(e.target.value));
  }, []);

  const onSaveBlur = React.useCallback(() => {
    if (String(value).length < 10) {
      setOnSave(true);
    } else {
      setOnSave(false);
    }
  }, [value]);

  useEffect(() => {
    if (value === null) {
      setValue(3);
    }
  }, [value]);
  console.log(value);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Form>
        <Form.Item
          name="input"
          rules={[
            { max: 10, message: "length should be less then 10 letters!" }
          ]}
        >
          <Input
            type="number"
            value={value}
            onChange={handleInputChange}
            onBlur={onSaveBlur}
          ></Input>
        </Form.Item>
      </Form>
    </div>
  );
};

export default App;

reactjs

```

React antd defaultValueが適応されない。

### 前提・実現したいこと
丸ボタンを押したときにBoxが右に移動して画面から消えます。
罰ボタンを押した時に左にBoxが動いて画面から消えます。
cardの配列cardsをmapで回して表示しています。
ボタンを押下した時に最前面のBoxだけ移動したいのですが、なぜか後ろのBoxも移動してしまいます。
cardsの配列のlenghtは３なので３回ボタンを押下したらBoxがなくなるはずですが、２回押下したタイミングで画面からBoxが全部消えてしまいます。どうしたらいいでしょうか？
わかる人いましたらご教授お願いしたいです。
よろしくお願いします。




### 補足情報（FW/ツールのバージョンなど）
react
scss
Typescript
framer-motion

react buttonを押下した後のBoxのアニメーションが複数回行われる。

配列の中身をmapで回してisShowDataでstateで管理しているmessageDataと比較して同じものがあれば表示せず、違う値なら表示したいです。
stateのmessageDateには同じ値が入らないようにしたいです
以下のように書いたのですがループのエラーになってしまいます。
自分ではどこがおかしいのかが全然わからないのでご教授お願いしたいです。
わかりやすく教えてくれる人よろしくお願いします。


```ここに言語を入力
//エラー内容
Unhandled Runtime Error
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
```



```ここに言語を入力
const Test: FunctionComponent = () => {
  const [messageDate, setMessageDate] = useState<string[]>([]);
  const dates = ['2012/11/11', 2012/11/11','2012/11/12','2012/11/12','2012/11/13'];
  const isShowDate = (date: string) => {
    if (messageDate.length === 0) {
      return true;
    }
    const isDate = messageDate.some((d) => d != date);
    return isDate;
  };
  const　AddDate = (date: string) => {
    const NewMessageDate = messageDate;
    NewMessageDate.push(date);
    setMessageDate(NewMessageDate);
    return date;
  };
  return (
    <>
      {dates.map((date, i) => (
        <>{isShowDate(date) && <div key={i}>{addDate(date)}</div>}</>
      ))}
    </>
  );
};

export default Test;
```

react someを使った条件分岐でループエラーになってしまう。

ログインしているかを判定するコードを実装しました。
①のjavascriptのコードを②typescriptに直したのですが以下のエラーが表示されてしまいます。
どう修正したらいいのでしょうか？
ご教授お願いしたいです
```ここに言語を入力
//error
Component' は値を参照していますが、ここでは型として使用されています。'typeof Component' を意図していましたか?
```





```ここに言語を入力
①
import Router from 'next/router';
import React, { Component } from 'react';
import AuthJudg from './Authjudg';

export default function Auth(Component) {
  const auth = new AuthJudg();
  return class Authenticated extends Component {
    constructor(props) {
      super(props);
      this.state = { isLoading: true };
    }
    componentDidMount() {
      if (!auth.loggedIn()) {
        Router.push('/login');
      }
      this.setState({ isLoading: false });
    }
    render() {
      return (
        <>
          {this.state.isLoading ? (
            <div>Loading</div>
          ) : (
            <Component {...this.props} />
          )}
        </>
      );
    }
  };
}


```

```ここに言語を入力
②
import Router from 'next/router';
import { useEffect, useState } from 'react';
import Authjudg from './Authjudg';

export default function withAuth(Component) {
  const Auth = new Authjudg();
  const Authenticated = () => {
    const [isLoading, setLoading] = useState(true);
    useEffect(() => {
      if (!Auth.loggedIn()) {
        Router.push('/login');
      }
      setLoading(false);
    });
    if (isLoading) return <Component />;
  };
  return Authenticated;
}

```

react ts変換できない

react, typescript, next.js, styled-components を使って開発をしています。
useRefを使い,dom要素を取得してClickイベントが呼ばれた時にoption-containerclassNameにactiveを追加したいです。

useRefを使う前は下記のように書いていましたがClickのイベントが呼ばれた時にactiveに変更するにはどうしたらいいのでしょうか？
わかるかたいましたらご教授お願いしたいです。
```ここに言語を入力
selected.addEventListener("click", () => {
  optionContainer.classList.toggle("active");
 });
```


```ここに言語を入力
import React, { FunctionComponent, useRef } from "react";
import styled from "styled-components";

const Container = styled.div`
  box-sizing: border-box;
`;

const SelectBox = styled.div`
  display: flex;
  width: 136px;
  flex-direction: column;
  font-size: 16px;
  color: #a3afbf;
  .option-container {
    font-size: 14px;
    box-shadow: 0px 1px 4px rgba(109, 123, 143, 0.12),
      0px 4px 24px rgba(109, 123, 143, 0.25);
    color: rgba(0, 0, 0, 0.87);
    width: 100%;
    max-height: 0;
    opacity: 0;
    transition: all 0.2s;
    border-radius: 4px;
    overflow: hidden;
    order: 1;
    text-align: center;
    ::-webkit-scrollbar {
      width: 3px;
      background: #blue;
      border-radius: 0 4px 4px 0;
    }
    ::-webkit-scrollbar-thumb {
      background: #fff;
      border-radius: 0 4px 4px 0;
    }
  }
  .active {
    max-height: 150px;
    opacity: 1;
    overflow-y: scroll;
  }
  .option,
  .selected {
    padding: 12px 15px;
    cursor: pointer;
  }
  .option:hover {
    background: #dadee6;
  }
  .label {
    cursor: pointer;
  }
  .radio {
    display: none;
  }
  .selected {
    background: #f6f7f9;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
    order: 0;
    .name {
      display: inline-block;
      color: rgba(0, 0, 0, 0.87);
      font-size: 16px;
    }
  }
  .selected::after {
    content: "";
    background: url("images/arrow_down.svg");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 30px;
    position: absolute;
    height: 100%;
    width: 15px;
    top: 18px;
    right: 10px;
    transition: all 0.4s;
  }
  .option-container.active + .selected::after {
    background: url("images/arrow_up.svg");
    background-size: contain;
    background-repeat: no-repeat;
  }
`;

export const SelectDate: FunctionComponent = () => {
  const month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  const selected = useRef(null);
  const optionContainer = useRef(null);
  const optionList = useRef(null);

 // useRef使う前
  // const selected = document.querySelector(".selected");
  // const optionContainer = document.querySelector(".option-container");
  // const optionsList = document.querySelectorAll(".option");
  // selected.addEventListener("click", () => {
  //   optionContainer.classList.toggle("active");
  // });
  // optionsList.forEach((o) => {
  //   o.addEventListener("click", () => {
  //     selected.innerHTML = o.querySelector("label").innerHTML;
  //     optionContainer.classList.remove("active");
  //   });
  // });

  const Click = () => {
    console.log(selected.current);
    console.log(optionContainer.current);
  };
  return (
    <Container>
      <SelectBox>
        <div className="option-container" ref={optionContainer}>
          {month.map((month, i) => (
            <div className="option" key={i} ref={optionList}>
              <input type="radio" className="radio" />
              <label htmlFor="automobiles">
                <p className="name">{month}月</p>
              </label>
            </div>
          ))}
        </div>
        <div className="selected" ref={selected} onClick={Click}>
          年
        </div>
      </SelectBox>
    </Container>
  );
};

```
```

react classNameを変更したい

inputformに文字が入力されて文字数が多くなるまたはenterキーが押されたときには改行されて画像のような感じにしたいです。
どうしたらできるのでしょうか？
ご教授お願いしたいです。



![イメージ説明](f77c44e15a5bad79a35263bbb2578971.png)



![![イメージ説明](ff662d16b18baecb9fd015fad74ec538.png)

inputfrom 文字が多くなったらスタイルを変えたい

開発環境
react + typpescript + material UI + styled-components


styled-componentsを使ってスタイルを当てています。
クロームで見た時にはスタイルがずれていなかったのですが、IEで見た時にスタイルがずれてしまっていました。
flexboxを使っており、調べたところflexboxはIEに対応していないものがいくつかありました。
styled-componentsはcss in jsなのでbabelを使えばflex-boxを使ったstyleもIEに対応してくれるように直すことはできるのでしょうか？

flexbox  IE対応

addTestの中のaddSelectの処理でtestEntitiesにjsonの値を表示したいのですが下記のエラーになってしまいます。
解決方法がわかる人いましたらご教授お願いしたいです。

```ここに言語を入力
Type 'TestEntity' is missing the following properties from type 'TestEntity[]': length, pop, push, concat, and 28 more.ts(2740)
```


```ここに言語を入力
import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'
import { NuxtAxiosInstance } from '@nuxtjs/axios'
import {Test, Selections } from '../domain/test';
import test from '@/test/test.json'

export class TestEntity {
  totalCount: number = 0
  selections: selectSatuses[] = []
  
  constructor(test: Test) {
    this.totalCount = test.total_count
    this.selections = this.addSelections(test.select_statuses[0].selections)
  }


  private addSelections(selections: Selections[]) {
    let select: any = []
    selections.forEach((selection) => {
      select = selection
    })
    return select
  }
}

export interface ITestState {
  testEntities: TestEntity[]
}

@Module({ stateFactory: true, namespaced: true, name: 'test' })
export default class Test extends VuexModule implements ITestState {
  testEntities: TestEntity[] = []
  

  @Mutation
  addSelect(selections: any) {
    this.testEntities = new TestEntity(selections)
  }

  @Action
  async loadTest(axios: NuxtAxiosInstance) {
    this.addSelect(test)
  }
}
```

vue.js 型エラーの解決方法

**環境**
react + typescript を使っています

**やりたかったこと**
https://qiita.com/Ouvill/items/c6761c32d31ffb11e114
上記のサイトを参考にしてmaterial Uiのコンポーネントをstyled-componentsで装飾したい。
src/materialui/theme.tsを作り上記のサイトをコピペして貼り付けました。
src/App.tsを作り、上記サイトを参考にしたのですがApp.tsで下記のエラーが出てしまいます。
わかる人がいましたらご教授お願いしたいです。

```ここに言語を入力
// エラー内容
[ts] インポート宣言が、'theme' のローカル宣言と競合しています。 [2440]
[ts] 代入式の左側は、変数またはプロパティ アクセスである必要があります。 [2364]
[ts] 名前 'StyledThemeProvider' が見つかりません。 [2304]
[ts] 名前 'MaterialThemeProvider' が見つかりません。 [2304]
[ts] 演算子 '<' を型 'boolean' および 'RegExp' に適用することはできません。 [2365]
[ts] 未終了の正規表現リテラルです。 [1161]
```


```ここに言語を入力
// theme.ts
import {createMuiTheme} from '@material-ui/core/styles'

const theme = createMuiTheme({
    palette: {
      primary: {
        // 緑色
        main: "#8BC34A",
        dark: "#689F38",
        light: "#DCEDC8"
      },
      secondary: {
        // オレンジ
        main: "#FF5722"
      },
      text: {
        // ちょっと薄い黒
        primary: "#212121",
        secondary: "#757575"
      }
    }
  });

export default theme;
```

```ここに言語を入力
//App.ts
import React from "react";
import {
  ThemeProvider as MaterialThemeProvider,
  StylesProvider
} from "@material-ui/styles";
import styled, {
  ThemeProvider as StyledThemeProvider
} from "styled-components";
import theme from "./materialui/theme";

const App = () => (
    <StylesProvider injectFirst>
      <MaterialThemeProvider theme={theme}>
        <StyledThemeProvider theme={theme}>
            // ここからメインのコンポーネントを記載する
            // <Main></Main> とか
        </StyledThemeProvider>
      </MaterialThemeProvider>
    </StylesProvider>
)
```

react  typescript エラー解決できない

**環境**
・reactとTypescriptを使っています
・デザインはmaterial UIを使っています。
・スタイルlはstyled-componentsで当てています。

**わからないこと**
Material UIからText Fileldをimportしてきてstyled-componetsを使ってスタイルを当てました。
しかし下記のようなエラーが出てしましました。
わかる人いましたらご教授お願いしたいです

```ここに言語を入力
// エラー内容
[ts] Type '{ id: string; variant: "outlined"; label: string; onChange: (e: ChangeEvent<HTMLInputElement>) => void; }' is missing the following properties from type 'Pick<Pick<TextFieldProps, "label" | "slot" | "select" | "style" | "title" | "ref" | "type" | "name" | "className" | "classes" | "innerRef" | "children" | "key" | "defaultChecked" | ... 269 more ... | "value"> & Partial<...>, "label" | ... 282 more ... | "value">': style, ref, type, className, and 10 more. [2740]
```

```ここに言語を入力

const StyledTextField = styled(TextField)`
  width: 200px;
  text-align: center;
  `;

    <StyledTextField
      id="outlined-basic"
      variant="outlined"
      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
        setState({ ...state, name: e.target.value})
      }}
    />
```

react typescript materialUIを使ったスタイルの当て方

データ登録の処理が終わった後にonPostSuccessが呼ばれます。
その中の    listItemStore.test(offer)　の処理で既存のitemEntriesに新しく登録したオブジェクト(item)を追加したいのですが
どう書いたらいいのでしょうか？
わかる人いましたらご教授お願いします！

```ここに言語を入力
// listItem.ts
export class ItemEntity {
  itemCode: string = ''
  userName: string = ''
  text: string = ''
  constructor(item: Item) {
    this.itemCode = item.code
    this.userName = item.user.name
  }
}

export interface ItemListState {
  itemEntities: itemEntity[]
}

export class Item {
  code: string = ''
  title: string = ''
  body: string = ''
}

@Module({ stateFactory: true, namespaced: true,  })
export default class ListItem extends VuexModule implements ItemListState {
  itemEntities: ItemEntity[] = []
  isLoading: boolean = false
  
  @Mutation
  test(item: Item) {
    this.itemEntities.push(new itemEntity(item))
  }

```

```ここに言語を入力
//List.vue
//データ登録後以下の処理が呼ばれる
    promise
      .then((res) => {
          this.onPostSuccess(res.ogp_url, title)
      })
      .catch((err) => {
        this.onPostFail(err)
      })

  onPostSuccess(ogpUrl: string, title: string) {
    const item = new Item()
    item.title = title
    item.code = itemCode
    listItemStore.test(offer)
    this.$router.push('/listitem')
  }
```

vue.js オブジェクトの最初に値を追加したい

Listが表示されるページがあります。
追加するボタンを押した時にデータに登録されるのですが登録された後にItemListに最新のデータを表示したいです。
今、現在のコードは追加をするボタンを押した後にデータに登録することができるのですが画面を自分でリロードしないと追加したものがListに表示されません。

データ追加した後にそのままLIstに表示されるようにするにはどうしたらいいでしょうか？



```ここに言語を入力
  //ItemList.vue
    <pull-to-refresh v-on:onRefresh="refreshItems">
      <list v-on:refreshItems="refreshItems" />
    </pull-to-refresh>
    <post-item-success-modal
      v-if="isShowModalPostItemSuccess()"
      @click-close="PostSuccessModal()"
      :code="getPostedItemCode()"
    />

  refreshItems() {
    PostStore.refreshItems(this.$axios)
  }

  addItems(items: Item[]) {
    items.forEach( item => {
      this.itemsEntities = [...this.itemsEntities, new ItemEntity(item)]
  })

  onComplete() {
    this.hasMorePage = false
  }

    async refreshItems(axios: NuxtAxiosInstance) {
    const res = await ItemDataSource.getItems(axios, this.title, this.count, this.text)
    this.addItems(res.items)
    if (res.items == null || res.items.length < 1) {
      this.onComplete()
    }
  }
}



```


```ここに言語を入力
//list.vue
  <button
    @click="onClickButton()"
    type="submit"
    name="button"
    class="create_form_button"
  >
    追加する
  </button>

  onClickButton() {
  const postTitle: string = this.title
  const postText: number = this.text
  this.postItem(
    postTitle,
    postText,
 )
  }
  postItem(
    title: string,
    body: string,
  ) {
    const promise = ItemDataSource.postItem(
      this.$axios,
      authStore.userId,
      title,
      body,
    )
    promise
      .then((res) => {
          this.onPostSuccess(res.ogp_url, res.code, title)
      })
      .catch((err) => {
        this.onPostFail(err)
      })
  }

    onPostSuccess(ogpUrl: string, itemCode: string, title: string) {
    const item = new Item()
    item.title = title
    item.code = itemCode
    item.ogp_url = ogpUrl
    Store.showModalPostSuccess(item)
    this.$router.push('/post')
  }
```

vue.js データを登録した後に画面を描画したい

セレクトボックスの初期値である食べ物を選択の文字だけ#c7ced7色にしたいのですがうまくスタイルが適応されません。
わかる人がいましたら教えてください。
よろしくお願いします

```
    <p class="create_text">
      <select v-model="selected" @change="onChange()">
       <option value="" disabled selected style="display:none;"
          >食べ物を選択</option
        >
        <option v-for="food in foods" :value="food"
          >{{food.name }}
        </option>
      </select>
    </p>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Food from '@/food.json'
import {Food } from '@/domain/Food'

@Component
export default class SelectBox extends Vue {
  selected: string = ''
  foods: Food[] = []

  mounted() {
    this.setFood()
  }

  setLocation() {
    this.foods=Food
  }

  onChange() {
    this.$emit('changeFood', this.selected)
  }
}
</script>

<style lang="scss" scoped>
.create {
  padding: 16px;
    &_text {
      width: 100%;
      box-sizing: border-box;
      background: white;
　　　 &-inline {
        width: 150px;
      }
  }
}
select {
  width: 100%;
  background: url(../selectbox.svg) no-repeat;
 option:first {
    color: #c7ced7;
  }
}
```

vue.js scss 　スタイル適応されない

**やりたいこと**
Vue.jsを使っています
テキストの中身にURLが入っていそれをクリックしたらそのULRまで遷移できるようにしたいです。
textの中身は以下のようにURLと文字列が混ざっています

```ここに言語を入力
// textの中身
このサイト面白いよーーー
ｈttps:// ufdgwufkdgksfdkshkjd
```

```ここに言語を入力
<template>
  <p class="relation">
    {{ text }}
  </p>
</template>
```


//追記
```ここに言語を入力
<template>
  <p class="label">{{ text }}</p>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
export default class Text extends Vue {
  @Prop({ type: String, required: true }) text: string
}
GetUrlInText() {
    const matches = this.text.match(/https?://\S+/gi)
    if(matches != null) {
        return matches
    } else {
        return []
    }
}
```