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

Question

我正在练习新的 React 钩子，我又提出了另一个问题，因为我在互联网上根本找不到这个。

我正在尝试将一个函数作为道具从一个函数组件传递给另一个函数组件。我正在使用 useState 挂钩管理状态。在基于类的组件中，您将使用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;

我对积极分享我的代码并以这种方式寻求帮助很陌生。因此，请让我知道是否需要有关此主题的更多信息！

此致

标签： javascriptreactjs

Answer 1

破坏一个道具 obj

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>
    )
}