React Typescript 型エラーがなおせない

Question

前提・実現したいこと

名前を入力しボタンを押したらListが追加される機能を作っています。
使っている技術は
React.js
Typescript
Hooks　　です。

名前を入力しているときの処理(onChange=(nameChange))のところで
下記のエラーが発生しました。
直しかたがわからないのでわかる人がいたら教えて欲しいです。
よろしくお願いします。

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

TS2322: Type '(value: string) => void' is not assignable to type 
'(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void'.
Types of parameters 'value' and 'event' are incompatible.
Type 'ChangeEvent<HTMLInputElement | HTMLTextAreaElement>' is not assignable to type 'string'. 

該当のソースコード

import React, { FC, useState } from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import { Card, CardContent } from '~/components/Card';
import {
  Button,
  TextField
} from '@material-ui/core';


const NameChange = (value: string):void => {
  setText(value);
}

const Index:FC<Props> {
  const [ text, setText ] = useState('')
  

  render() {
    return (
      <React.Fragment>
        <Card>
          <CardContent>
            <div>
            <TextField
              type="input"
              value={text}
              onChange = {NameChange}
            />
            <Button
              onClick = {}
              disabled={false}
            >
            名前
            </Button>
            </div>
          </CardContent>
        </Card>
      </React.Fragment>
    );
  }
}

Answer 1

onChangeの第一引数はほとんどの場合eventです。（詳しく調べてません）
そのため、エラーメッセージにもあるように(value: string) => voidは割り当てられません。

今回の場合ですと以下のように変更すると動くと思います。

const NameChange = (
  event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
): void => {
  setText(event.target.value);
};

型はエラーメッセージをよく読むと修正できると思うので、翻訳などを駆使して修正してみる事をお勧めします。

また、NameChangeはIndexコンポーネント内に入れないと動かないような気がします。

Comments

[whiwhdiw]

解答ありがとうございます。
第一引数がeventで型がReact.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>ということでしょうか？

[whiwhdiw]

またNameChangeにがtextを渡したいので
const NameChange = (
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, text: string
): void => {
setText(text);でしょうか
setText(event.target.value);
};

[tutti56]

> 第一引数がeventで型がReact.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>ということでしょうか？
エラーを見る限りはその通りで間違いないと思います。

> またNameChangeにがtextを渡したいので...
material-uiを使った事がないので詳しくは分かりませんが、TextFieldにpropsとして渡しているvalue={text}がevent.target.valueとして利用できると考えています。

そのため、今回の場合は第二引数のtext、setText(text)は不要かなと思います。

[whiwhdiw]

できました。ありがとうございます