在 React 中将多个数据从 child 传递到 parent

Question

我制作了一些更复杂的待办事项列表 - 带有截止日期/日历组件。

我能够将数据从 Todo child 组件传递到 TodoList Parent，但只能传递输入。我也无法将日历（DeadlineList）数据也传递给 parent。

PARENT TodoList.js

import React from 'react'; 
import Todo from './Todo';
import DeadlineList from './DeadlineList';

const TodoList = ({ todos, toggleTodo}) => (
    
    <table>
           <tbody>
        <tr>
            <th className='taskTH'>TASK</th>
            <th className='deadlineTH'>DEADLINE</th>
            </tr>
            
            <tr>
            <td className='taskTD'>
                {todos.map(todo => ( 
                    <Todo
                       
                key={todo.id}
                text={todo.text}
                completed={todo.completed}
                toggleTodoItem={() => toggleTodo(todo.id)} />
        )    )}
</td>
            <td
            className="deadlineTd"
            >   {todos.map(todo => ( 

            <DeadlineList
                key={todo.id}
                text={todo.startDate}
                completed={todo.completed}
                onClick={() => toggleTodo(todo.id)} />
        )    )}</td>
        </tr>

   </tbody>
</table>

)

export default TodoList;

CHILD Todo.js - 工作

import React, { useState } from 'react';
import wooHooSound from '../utils/wooHoo.js'

const Todo = (props) => { 

    const { toggleTodoItem, completed, text } = props;

    let [ shouldPlaySound, setShouldPlaySound ] = useState(true);

    function wooHooEverySecondClick() {
        if (shouldPlaySound) {   
            wooHooSound.play();
            setShouldPlaySound(false);
        } else {
            setShouldPlaySound(true);
        }
    }

    return (
        <li className="bananaLi"
            onClick={() => {
                toggleTodoItem();
                wooHooEverySecondClick();
            }}
            style={{
                textDecoration: completed ? 'line-through' : 'none'
            }}
        > 
            {text}
 
        </li>
    );
};

export default Todo;

CHILD DeadlineList.js - 没有传递数据

import React from 'react';

const DeadlineList = ({ onClick, completed, value }) => (
    
    
     
    <li className="deadlineLi"
        onClick={onClick}
        style={{
            textDecoration: completed ? 'line-through' : 'none'
        }}
     >
 
       {value}

    </li>
);


export default DeadlineList;

Answer 1

我看到我检查了你的代码有小错误吧：

<DeadlineList
                key={todo.id}
                text={todo.startDate}
                completed={todo.completed}
                onClick={() => toggleTodo(todo.id)} />

截止日期列表：

const DeadlineList = ({ onClick, completed, value }) => (
  <li
    className="deadlineLi"
    onClick={onClick}
    style={{
      textDecoration: completed ? "line-through" : "none",
    }}
  >
    {value}
  </li>
);

错误：

在 DeadlineList 组件中，您期望 value 作为道具，但您没有从 TodoList 组件发送
你的 todo 没有 startDate 它有 date

解决方案：

更新 TodoList 和 DeadlineList

<DeadlineList
                    key={todo.id}
                    value={todo.date}
                    completed={todo.completed}
                    onClick={() => toggleTodo(todo.id)}
                  />

和内部 DeadlineList 组件：

const DeadlineList = ({ onClick, completed, value }) => {
  return (
    <li
      className="deadlineLi"
      onClick={onClick}
      style={{
        textDecoration: completed ? "line-through" : "none"
      }}
    >
      {new Intl.DateTimeFormat("en-US").format(value)}
    </li>
  );
};

这是您的代码演示：https://codesandbox.io/s/clever-stonebraker-mpv3r?file=/src/components/DeadlineList.js:28-320

在 React 中将多个数据从 child 传递到 parent

Pass multiple data from child to parent in React

components

parent-child

reactjs