无法在点击时添加我们自己的反应元素答案

【问题标题】：Cannot add our own react element onclick无法在点击时添加我们自己的反应元素
【发布时间】：2021-09-24 13:51:09
【问题描述】：

我正在处理任务列表页面。主页有一个表单，用户可以在其中添加任务并单击添加任务按钮，相应的任务将附加到“todo-task”div。我正在使用我自己创建的反应元素（例如洗衣服），它返回一个复选框，后跟作为道具传递的文本。在下面的代码中，我试图在我们的 todo-task div 的末尾附加，但它向我显示了一些错误。我的做法对吗？如果不是，我应该采取什么方法？

import React,{useState} from 'react'
import './Tasklist.css'
import Button from 'react-bootstrap/Button';
import AddBoxIcon from '@material-ui/icons/AddBox';
import Checkbox from '@material-ui/core/Checkbox';
import Task from './Task.js';

function Tasklist() {
const [task, settask] = useState("")

let pendingTask = document.getElementById('pending-task')
let doneTask = document.getElementById('done-task')

const addTask = (event)=>{
    event.preventDefault()
    let tmp_text=task.trim()

    if(tmp_text==="")return

    let task_tmp = document.createElement(<Task text={tmp_text} />);
    pendingTask.appendChild(task_tmp);
    settask("");
}

const keyDownEvent=(e)=>{
    let key=e.key

    if(key==='Enter' && !e.shiftKey)addTask(e);
}
return (
    <>
        <div className="add-task">
            <form >
                <textarea 
                    type="text" 
                    value={task}
                    rows={1}
                    placeholder="Add Task" 
                    onChange={(e)=>settask(e.target.value)}
                    onKeyDown={keyDownEvent}
                    />
                <Button variant="outline-primary" onClick={addTask}>
                    <AddBoxIcon /> Add Task
                </Button>
            </form>
        </div>
        <div className="todo-task" id="pending-task">

        </div>
        
        <Task text="Enjjoyyyy!!!" />

        <hr />

        <div className="done-task" id = "done-task">
            <ul id="done-task-list">

            </ul>
        </div> 
    </>
)
}

export default Tasklist

【问题讨论】：

显示什么错误？
您在下面得到了另一个很好的答案，但它实际上与昨天对同一问题的答案相同：How to add our own react element?。还有什么不清楚的地方吗？

标签： javascript html css node.js reactjs

【解决方案1】：

您正在以一种根本不正确的方式处理此问题，因此这不是一个快速解决方案。现在是时候退后一步，重新开始您的组件了。

您当前尝试做的是直接修改 DOM。 不要在 React 中这样做。你应该做的是维护状态。

与其尝试直接创建一个元素并将其添加到 DOM，不如创建一条记录并使用该记录更新状态。这是一个与渲染 DOM 完全不同的任务。实际渲染是基于当前状态完成的。

目前在您所在的州，您有“一项任务”。但是您正在尝试构建功能以添加更多任务。所以实际上你的州应该有一个list的任务，你可以添加到那个列表中。（当然，这可以是单个任务的补充。您可以根据需要多次使用useState。）

例如，考虑这样的状态：

const [tasks, setTasks] = useState([]);

然后在您的按钮单击处理程序中添加一个任务：

const addTask = (event)=>{
    event.preventDefault();
    let tmp_text=task.trim();
    if(tmp_text==="") return;

    setTasks([...tasks, tmp_task]); // <--- here
    settask("");
}

这会保存一个正在运行的任务数组。

然后在渲染中，您将.map 覆盖这些任务以显示它们：

<div className="todo-task" id="pending-task">
    {tasks.map((t, i) => (
        <Task key={i} text={t} />
    ))}
</div>

【讨论】：