React tyepscript 子コンポーネントで親コンポーネントのStateを更新させる
Q&A
Closed
やりたいこと
React Typescriptで
子コンポーネントに親コンポーネントに定義したメソッドを渡して
子コンポーネントのセレクターの変更イベントに設定
最終的に親コンポーネントのStateを子コンポーネントのイベントで間接的に更新
現状
以下のエラーが出ているがどう修正したらいいのかよくわからない
Type 'void' is not assignable to type '(...args: any[]) => any'.
ソースはこんな感じ
親コンポネントの定義
import React,{ useState, useEffect, createRef } from 'react';
import './App.css';
import Select from './Components/Fields/Select'
function App() {
var [registUsers, setRegistUser] = useState([""]);
function test(...args: any[]): void {
alert("test");
}
return (
<div className="App">
↓ 子コンポーネント、以下の記述でこんな感じのエラーがでる。
↓ Type 'void' is not assignable to type '(...args: any[]) => any'.
<Select onChange={test(["test1","test2"])} id="delete-user" className='delete-user' title='削除ユーザー' selectItems={registUsers}/>
</div>
);
}
export default App;
子コンポーネントの定義
import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
type PropsType = {
title: string
selectItems: string[]
className: string
id: string
onChange: (...args: any[]) => any;
}
export default function BasicSelect({title,selectItems,className,id,onChange}: PropsType) {
return (
<Box >
<FormControl sx={{ width: '100%' }}>
<InputLabel id="demo-simple-select-label">{title}</InputLabel>
<Select
labelId="user-label"
id={id}
label="Age"
onChange={onChange}
className={className}
>
{selectItems.map((item,index) => (
<MenuItem value={index}>{item}</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}
0
