常連

### 前提・実現したいこと

material uiを使って入力フォームを作成していましたが、フォームの中央揃えができません。
Gridを使いましたが思うように実装できませんでした。
解決方法をご存知の方、教えていただきたいです。

### 発生している問題・エラーメッセージ
ボタンは中央揃えできているがフォームの中央揃えができていない。
![イメージ説明](72c1dbc180a30b346920c8b69dd1e189.png)

### 該当のソースコード

```react.js
return (
    <React.Fragment>
          <Grid container spacing={3} alignItems="center" justify="center">
            <Grid item xs={12}>
              <TextField
                id="standard-basic"
                name="name"
                label="名前"
                value={values.name}
                onChange={handleInputChange}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                id="date"
                label="date"
                type="date"
                name="date"
                sx={{ width: 220 }}
                InputLabelProps={{
                  shrink: true,
                }}
                format="yyyy/MM/dd"
                value={values.date}
                onChange={handleInputChange}
              />
            </Grid>
            
            <Grid item>
              <Button
                variant="contained"
                color="secondary"
                startIcon={<SaveIcon />}
                onClick={submit}
              >保存する
              </Button>
              <Button
                variant="contained"
                color="primary"
                startIcon={<SaveIcon />}
                onClick={() => {
                  props.setFlag(false)
                }}
              >戻る
              </Button>
            </Grid>
          </Grid>
    </React.Fragment>
)

```

### 試したこと
Gridでcontanerとjustifyにcenterを与える
https://teratail.com/questions/98504

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

material ui 中央揃えができない

入力完了後のタブ移動制御をしたいので、タップ時にイベントを取得して判断しようとしています。
他の部分をタップするとイベント取得できるのですが、
右下のボタンを押下してもイベントが取得できません。
右下ボタン押下すると次のテキストフィールドへタブが移動してしまいます。

onKeyDown、onClickイベントを試しましたが、イベント取得できませんでした。

ご教授をお願いいたします。


inputmode="numeric"で表示されるキーボードの右下(Enterのような)をタップしてもイベントが取得できない

仕事の都合でReactを初めまして、Material-UIの使い方がよく分かっておりません、、
やりたいこととしては、SNSの「いいねボタン」に似たものを作ることです。

MaterialUIのサイトから持ってきたハートアイコンを使おうと思います。
それをボタンとしての役割にする方法が分からず質問です。

# 実際に書いたコード
最初は
```SnsList.js
import React, { Component } from 'react';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';

class Sns extends Component {
  render() {
    return(
        <FavoriteBorderIcon onClick = {() => this.props.SnsPost()}/>
    );
  }
}
```
でしたが、当然ただアイコンが表示されただけでしたので、buttonタグで囲みました。
```React
import React, { Component } from 'react';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';

class Sns extends Component {
  render() {
    return(
        <button><FavoriteBorderIcon onClick = {() => this.props.SnsPost()}/></button>
    );
  }
}
```
この実行結果が以下の写真となります（左のゴミ箱マークは今回は質問対象外です）
![イメージ説明](2f2b50fbc495ce8eb25b10c61bc832c1.png)

# 実現したいこと

**ハートアイコンそのものをボタンとして機能させること**

buttonタグを使うと、ハートアイコンはボタンとして処理できるのですが、これをハートアイコンだけにするにはどうすれば良いでしょうか（ハートを囲っているグレー部分を無くす）

これを押すと右側にいいねの数をカウントしていきたいと思っています。

# 補足

※stateはApp.jsで保持しており、
```
onClick = {() => this.props.SnsPost()}
```
の
```
SnsPost()
```
はApp.jsファイルで定義します。

また、Firebaseやreduxなどは使用しません。

ご存知の方がいらっしゃいましたら、ご教示いただけますと幸いです。
よろしくお願いいたします。

# 解決したコード

回答いただいたbuttonタグにonClick処理を書き込みました。

一度失敗した例
```React
<button onClick = {() => this.props.SnsPost()}><FavoriteBorderIcon /></button>
```
これだと変わらずグレーの四角に囲まれたままでした。

Buttonで解決しました。
```React
import { Button } from '@material-ui/core';

<Button onClick = {() => this.props.SnsPost()}><FavoriteBorderIcon /></Button>
コード
```
左のゴミ箱マークはただのアイコンなので少し位置がずれていますが、マウスを当てたらグレーがかります。
マウスあてる前↓
![イメージ説明](61542d5c50fa16eef2e2b19407630e6d.png)
マウスあてた時↓
![イメージ説明](0eecff6e07c981126c354ef8cec35657.png)

React：Meterial-UIを使ったクリック処理

material uiとreactjsにて、ウェブアプリの作成をしています。


現在、作成した機能を中央揃えしたく、試行錯誤しましたが、一向に中央揃えにならず、質問した次第です。

中央揃えしたい例：
```js
            <div>
              <Card>
              <CardTitle title='Make new post'  subtitle={this.state.username} />
                <CardText>
                  <p>
                  <TextField
                    id="post_title"
                    floatingLabelText="type the title"
                    value={this.state.post_title}
                    onChange={this.handleChange_title}
                    />
                  <br />
                  <TextField
                    floatingLabelText="type the body"
                    multiLine={true}
                    value={this.state.post_body}
                    onChange={this.handleChange_body}
                    multiLine={true}
                    rows={2}
                    />
                  <br />
                  <RaisedButton
                    label="posting"
                    secondary={true}
                    onClick={this.handleSubmit}
                    />
                  <br />
                  </p>
                </CardText>
              </Card>
            </div>
```

この部分を中央揃えにするには、どのようにcssを記述し、importし、どこのタグにどう書き込めばいいかを教えていただけると幸いです。

参考までに現在の配置状態は
![イメージ説明](bcd1bb8fca5c1c9580739d2125c0f766.png)
このような状態です。

コンポーネントの中央揃えの方法。　material ui on Reactjs。

＜現状＞
現在、Material-UIのTextFieldコンポーネントの初期値を消すことができなく、困っています。
defaultValueをセットしてみたり色々試しましたが、うまく行きません。宜しくお願いします。

＜実現したいこと＞
①Material-UIのTextFieldで数値を扱いたい
②Material-UIのTextFieldの初期値を0にセットしたい
③Material-UIのTextFieldの値を削除して、新規の値を入力したい
④Material-UIのTextFieldの値を0にするクリアボタンを作成したい

＜コード>
```js
import React from 'react'
import TextField from '@material-ui/core/TextField'

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        d1: 0
    }
  }

  handleChange = (event) => {
    this.setState({
      [event.target.name]: Number(event.target.value)
    })
  }

  handleClear = () => {
    this.setState({
        d1: 0
    })
  }

 render(){
  <div>
    <TextField
     type="number"
     name="d1"
     InputLabelProps={{
      shrink: true,
     }}
     margin="dense"
     value={this.state.d1}
     onChange={this.handleChange}
    />
    <Button onClick={ this.handleClear }>
      クリア
    </Button>
  </div>
```

Material-UIのTextFieldコンポーネントの初期値を消すことができない

### 前提

reactでMaterial UIのTextFieldを使って開発しています。
TextFieldのdefaultValueという属性を使用したいのですが、一方はうまくいっているのに対して、他方はうまくいっておりません。
コードが長すぎるため、必要だと思うところのみコードを載せますので、載せていない部分のコードが必要であれば教えてください。

label="お客様コード" の方のTextField だとdefaultValueを設定できるが、label="担当者"の方のTextFieldのdefaultValueが設定できません。

Material UIのdefaultValueのドキュメントをみると、「Use when the component is not controlled」と書かれているが、それが原因なのでしょうか？よくわからず困っています。

### 実現したいこと

ここに実現したいことを箇条書きで書いてください。
- TextFieldにdefaultValueを設定したい

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

```test.jsx

import { NohinHeaderContext } from '../../providers/setNohinHeaderProvider';
import { useGetNohinHeaderInfo } from '../../../hooks/useGetNohinheaderInfo';
import {TextField} from '@mui/material';

 const { nohinHeader, setNohinHeader } = useContext(NohinHeaderContext);

 useGetNohinHeaderInfo();

export const test =() =>{

return(
 <TextField variant="standard" label="自社担当者" sx={{ m: 1 }}
  defaultValue={nohinHeader.representative} /> ★
                       
); 
}

```

```useGetNohinheaderInfo.js
import { useContext, useEffect } from "react";
 import {NohinHeaderContext} from '../components/providers/setNohinHeaderProvider';

export const useGetNohinHeaderInfo =() =>{
    
     const {nohinHeader, setNohinHeader}=useContext(NohinHeaderContext);
     let newData = {};
    useEffect(() => {
        fetch('getnohinheaderinfo.php', { method: 'POST', mode: 'cors', credentials: 'include' }
        )
            .then(response => {
                if (!response.ok) {
                    throw new Error(`${response.status} ${response.statusText}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('** fetch: then(data)');
                console.log(data);                               
                newData={indexno:data.index_no,voucherno:data.voucher_no,customerid:data.customer_id,issueddate:data.issued_date,
                    representative:data.representative,taxr:data.tax_r,taxs:data.tax_s,subtotals:data.subtotal_s,subtotalr:data.subtotal_r,
                    taxamounts:data.tax_amount_s,taxamountr:data.tax_amount_r,totalnotax:data.total_notax,taxamount:data.tax_amount,totalamount:data.total_amount}
                 setNohinHeader(newData); 
            })
            .catch((reason) => {
                console.log('** fetch: catch');
                console.log(reason);
            });
    }, []);

    return true;
}
```

```setNohinHeaderProvider.jsx

import { createContext, useState } from "react";

export const NohinHeaderContext = createContext({});

export const SetNohinHeaderProvider = props => {
  const { children } = props; 

  const [nohinHeader, setNohinHeader] = useState({      
        indexno:"",voucherno: "", customerid: "", issueddate: "", representative: "", 
        taxr: "",taxs:"",subtotals:"",subtotalr:"",taxamounts:"",taxamountr:"",
        totalnotax:"",taxamount:"",totalamount:"",    
  });

  return (
    <NohinHeaderContext.Provider value={{ nohinHeader, setNohinHeader}}>
      {children}
    </NohinHeaderContext.Provider>
  );

};

```



### 試したこと
★のTextFieldに対してdefaultValueではなくvalue={nohinHeader.representative}とするとカスタムフックから取得した値はきちんと取れてきている。
### 補足情報（FW/ツールのバージョンなど）

 "@mui/material": "^5.10.8",
"react": "^18.2.0",

Material UIのTextFieldのdefaultValueについて

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Reactでchat機能を作成しています。
material-uiからコピーして貼り付けたところ以下のエラーが発生しました。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
Module not found: Can't resolve '@mui/material/Avatar' in '/Users/******/practice/chatbot-demo/src/components'

### 該当のソースコード

import React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';

const Chats = () => {
  return (
    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
      <ListItem alignItems="flex-start">
        <ListItemAvatar>
          <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
        </ListItemAvatar>
        <ListItemText
          primary="Brunch this weekend?"
          secondary={
            <React.Fragment>
              <Typography
                sx={{ display: 'inline' }}
                component="span"
                variant="body2"
                color="text.primary"
              >
                Ali Connors
              </Typography>
              {" — I'll be in your neighborhood doing errands this…"}
            </React.Fragment>
          }
        />
      </ListItem>
    </List>
  )
}

export default Chats
```ここに言語を入力
コード
```

### 試したこと

調べて下記を実行しました。
npm install @material-ui/core
npm install @material-ui/icons

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

material-ui でのModule not found

### 実現したいこと
RHF×MaterialUIで作成しているフォームのラジオボタン項目に、
APIで取得した値を初期値として設定したい

### 発生している問題・分からないこと
react-hook-formとMaterialUIを利用してフォームを作成しています。
ラジオボタン項目にAPIで取得した値を初期値として設定したいですが、やり方がわかりません。



### 該当のソースコード

```TypeScript
import React, { useState } from 'react'
import {
  Container,
  Stack,
  TextField,
  FormControl,
  FormControlLabel,
  RadioGroup,
  Radio,
} from '@mui/material';
import { useForm, Controller } from 'react-hook-form'
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup'

import client from '../lib/api/client';

const UserInfo = () => {

  // フォームの型
  class UserFormData {
    name: string = ''
    sex: number = 1
  }

  // バリデーションルール
  const UserSchema = yup.object({
    name: yup
      .string()
      .required(),
    sex: yup
      .number()
      .required()
  });

  // 初期表示データ取得
  const initDisplayData = async (userId: string) => {
    try {
      const result = await client.get(`users/${userId}`);
      const data = result.data.data;
      return {
        name: data.name,
        sex: data.sex,
      } as UserFormData;
    } catch (error) {
      console.log("取得失敗");
      return new UserFormData();
    }
  }

  const {
    register,
    control,
    formState: { errors },
  } = useForm({
    mode: 'all',
    resolver: yupResolver(UserSchema),
    defaultValues: async() => initDisplayData('1') // TODO:
  })
  
  return (
    <Container maxWidth="sm" sx={{ pt: 5 }}>
      <Stack spacing={3}>

      <TextField
          required
          label="氏名"
          InputLabelProps={{ shrink: true }}
          {...register('name')}
          error={"name" in errors}
          helperText={errors.name?.message}
        />

        <Controller
          name='sex'
          control={control}
          render={({field}) => (
            <FormControl>
              <RadioGroup
                row
                aria-label="sex"
                defaultValue={2}  // TODO: ここにAPIからの初期値を設定したい
                {...field}
              >
                <FormControlLabel value={1} control={<Radio />} label="男性" />
                <FormControlLabel value={2} control={<Radio />} label="女性" />
                <FormControlLabel value={3} control={<Radio />} label="その他・未回答" />
              </RadioGroup>
            </FormControl>
          )}
        />
      </Stack>
    </Container>
  )
}
export default UserInfo
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
defaultValue={2} と固定値を設定している箇所を
defaultValue={field.value} や defaultValue={getValues('sex')} としてもラジオボタンは未選択の状態でした。

また、initDisplayData の中で「sex」というstateを設定し、defaultValueに渡してもラジオボタンは何も選択されていない状態でした。

TextFieldの項目の方には取得した初期値が設定されます。

### 補足
react, react-hook-formの扱い自体あまり慣れていないため、的外れなことをしていたらすみません。