javascript - 如何使用新的 React Hooks 将函数作为 prop 传递

Question

我正在练习新的 React hooks，我再次提出了另一个问题，因为我根本无法在互联网上找到这个问题。

我试图将函数作为 prop 从一个函数组件传递到另一个函数组件。我正在使用 useState Hook 管理状态。在基于类的组件中，您可以使用 this.props.addTodo(this.state)，我现在使用 addTodo.addTodo(content)。这感觉有点hacky。难道没有更好的方法吗？请参阅下面的完整代码。

主要应用组件

    import React, { useState } from 'react';
    import Todos from './Todos';
    import AddTodo from './AddTodo';


    function App() {

      const [todos, setTodos ] = useState([
          {id: 1, content: 'buy some milk'},
          {id: 2, content: 'play mario kart'}
      ]);

      const deleteTodo = (id) => {
        const Todos = todos.filter(todo => {
          return todo.id !== id
        });

      setTodos(Todos)
      }

      const addTodo = (todo) => {
        console.log(todo) //Here I want to do something with the new todo value, which I got from the add todo component
      }

      return (
        <div className="todo-app container">
          <h1 className="center blue-text">Todo's</h1>
          <Todos todos={todos} deleteTodo={deleteTodo} />
          <AddTodo addTodo={addTodo} />
        </div>
      );
    }

    export default App;

添加待办事项组件

    import React, { useState } from 'react';

    function AddTodo(addTodo) {

        const [content, setContent] = useState('');

        const handleChange = (e) => {
            setContent(e.target.value);
        }

        const handleSubmit = (e) => {
            e.preventDefault();
            addTodo.addTodo(content);
        }

        return (
            <div>
                <form onSubmit={handleSubmit}>
                    <label>Add new todo</label>
                    <input type="text" onChange={handleChange}/>
                </form>
            </div>
        )
    }

    export default AddTodo;

我对于主动分享我的代码并以这种方式寻求帮助还很陌生。因此，如果需要有关此主题的更多信息，请告诉我!

致以诚挚的问候

Answer 1

销毁 Prop 对象

import React, { useState } from 'react';

function AddTodo({addTodo}) {

    const [content, setContent] = useState('');

    const handleChange = (e) => {
        setContent(e.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        addTodo(content);
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <label>Add new todo</label>
                <input type="text" onChange={handleChange}/>
            </form>
        </div>
    )
}