

### 前提・実現したいこと

親コンポーネントで子コンポーネントに渡す関数を定義したいのですが、引数をどう書いたらいいのかがわかりません。  
わかる人がいたら教えて欲しいです

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

[code]

    **types.ts**
    export type Task {
      id: number
      text: string
      done: boolean
    }
    
[/code]

[code]

    //親コンポーネント
    import React, { useState } from 'react'
    import { Task } from './Types'
    
    // 初期値を設定
    const  inisialState:Task[] = [
      {
        id: 0,
        text: "",
        done: false,
      }
    ]
    
    const App: React.FC = () => {
        const [text, setText] = useState('')
        const [task, setTask] = useState(inisialState);
    
    
    //チェックボックスが押された時の処理　　（ListItem(子)に渡したい）
        const　handleCheck = (何を入れたらいいのか) => {
            setTasks(prev => prev.map(t =>
                t.id === task.id
                    ? { ...task, done: !task.done }
                    : t
            ))
        }
     // 削除ボタンが押された時の処理　（ListItem(子)に渡したい）
        const handleDelete = (何を入れたらいいのか) => {
            setTasks(prev => prev.filter(t =>
                t.id !== task.id
            ))
        }
    
    
        return (
    　　　　　　〜省略〜
            <div>
                <TaskList/>
            </div>
        )
    }
    
[/code]

[code]

    子コンポーネント
    import React from 'react'
    import TaskItem from './TaskItem'
    import { Task } from './Types'
    
    interface Props {
      text: string
      tasks:　task[]
      handleCheck:  
      handleDelete: 
    }
    
    
    const TaskList: React.FC<Props> = ({props}) => {
    
        return (
    
       ~ 省略〜
        )
    }
    
    export default TaskList
    
[/code]


CC BY-SA 4.0
2020-01-16T09:26:52.350
62292
2020-06-28T15:05:45.507
37487
question
reactjs typescript react-jsx
React Typescript 関数の引数の書き方


親から子に値を渡すには、render() の中で、例えば

[code]

    render() {
      return (
        <ChildComponent
          listItem={this.state.listItem}
          onChange={this.handleChange} />
      );
    }
    
[/code]

のように、親コンポーネントから子コンポーネントをレンダリングするタイミングで渡します。

「何を入れたらいいのか」の部分は、子コンポーネントからの返り値を親コンポーネントに渡すときに使います。例えば子コンポーネントでListItemが更新されたとすると、親コンポーネントがその更新されたデータを受け取り、stateに反映するかどうかなど判定するなどして、

[code]

    handleChange(updatedElementId, data) {
      const updatedItems = this.state.listItems.slice();
      updatedItems[updatedElementId] = data;
      this.setState({
        listItems: updatedItems
      });
    }
    
[/code]

のようにします。  
データはあくまで親コンポーネントが子コンポーネントをレンダーするときのみ渡し、子コンポーネントでデータが更新されたときは子コンポーネントがonChangeを通して親コンポーネントのhandleChangeに報告する、そして親コンポーネントのthis.stateを更新して再び子コンポーネントにデータを渡して新しいデータでレンダーする、という流れになります。


CC BY-SA 4.0
2020-01-30T17:27:07.260
62670
2020-01-30T17:27:07.260
15462
62292
answer