Question

我正在处理任务列表页面。主页有一个表单，用户可以在其中添加任务并单击添加任务按钮，相应的任务将附加到“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

Answer 1

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

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

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

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

无法添加我们自己的反应元素 onclick

1 个答案: