设置占位符值

Question

我想使用任务数组设置占位符，但刷新页面时页面变为空白，刷新前会显示正确的值，但刷新后页面变为空。

<input type="text" id="edit" placeholder={tasks.find(task => task.id === parseInt(selectedTask)).value}  ref={editTaskRef} onBlur={() => editTask()}/>

我试着把它变成一个函数，它加载页面，但在占位符中没有设置任何值

<input type="text" id="edit" placeholder={() => tasks.find(task => task.id === parseInt(selectedTask)).value}  ref={editTaskRef} onBlur={() => editTask()}/>

页面的完整代码

import React, { useState, useRef } from 'react'
function App() {
return (
<div>
<TodoListItem />
</div>
)
}
const TodoListItem = () => {
//for inputs
const inputTaskRef = useRef()
const editTaskRef = useRef()
//for task management
const [tasks, setTasks] = useState([])
const [index, setIndex] = useState(0)
//for sidebar
const [toggle, setToggle] = useState(true)
const [grid, setGrid] = useState("") 
const [selectedTask, setSelectedTask] = useState("")
//shows the sidebar
const TodoItemDetails = () => {
setToggle(false)
setGrid("grid grid-cols-2")
}
//form handling
const onFormSubmit = e => {
e.preventDefault()
let value = inputTaskRef.current.value
if(value !== ""){
let task = {
id: index,
task: <Task value={value} key={index} id={index} />,
value: value
}
setIndex((index) => index+1)
setTasks((oldTasks) => [ ...oldTasks, task ])
inputTaskRef.current.value = ""
}
}
//closes the sidebar
const closeSideBar = () => {
setToggle(true)
setGrid("")
editTaskRef.current.value = ""
}
//task hook
const Task = (props) => {
return(
<li>
<button onClick={() => {
TodoItemDetails()
setSelectedTask(props.id)
editTaskRef.current.value = ""
}} className="bg-white w-full hover:bg-gray-200 p-4 my-1 rounded shadow-sm text-left">{props.value}</button>
</li>
)
}
//for editing a task
const editTask = () => {
let value = editTaskRef.current.value
if(value !== ""){
let editedTaskIndex = tasks.findIndex(task => task.id === parseInt(selectedTask))
tasks[editedTaskIndex].task = <Task value={value} key={index} id={selectedTask} />
tasks[editedTaskIndex].value = value
editTaskRef.current.value = ''
}
}

//for deleting a task
const deleteTask = () => {
let deletedTaskIndex = tasks.findIndex(task => task.id === parseInt(selectedTask))
tasks.splice(deletedTaskIndex, 1)
editTaskRef.current.value = ''
closeSideBar()
}
return (
<div className="bg-gray-100 items-center justify-center min-h-screen min-w-screen p-4">
<div className={grid}>
<div>  
<form onSubmit={onFormSubmit} className="bg-white rounded py-4 px-2 my-4 h-16 shadow-sm">
<input className="w-[85%] sm:w-[87%] md:w-[90%] lg:w-[95%] h-full float-left focus:outline-none placeholder-blue-500 ml-2 py-1 focus:placeholder-black" type="text" id="task" placeholder="Add a task" ref={inputTaskRef} onFocus={() => closeSideBar()}/>
<button type="submit" className="text-blue-500 float-right text-2xl -translate-y-0.5 -translate-x-1">+</button>
</form>
<ul>{tasks.map(task => task.task)}</ul>
</div>
<div hidden={toggle} className={"bg-white rounded py-2.5 px-2 ml-5 my-4 h-72 shadow-sm "+grid}>
<input className="col-start-1 col-end-3 w-100 h-12 float-left focus:outline-none placeholder-blue-500 focus:placeholder-black ml-2 " type="text" id="edit" placeholder={tasks.find(task => task.id === parseInt(selectedTask)).value}  ref={editTaskRef} onBlur={() => editTask()}/>
<button className="col-start-1 col-end-2 text-blue-500 h-[400px] text-2xl mr-14" onClick={() => deleteTask()}>delete</button>
<button className="col-start-2 col-end-3 text-blue-500 h-[400px] text-2xl ml-14" onClick={() => closeSideBar()}>x</button>
</div>
</div>
</div>
)
}
export default App

Answer 1

当您第一次进入页面时，selectedTask只是初始状态的""(空字符串(，这就是为什么它显示为空。

Answer 2

首次装入TodoListItem时，tasks和selectedTask分别为空数组([](和空字符串(''(。如果您想防止此数据重置，您应该使用将该值存储在localStorage中

localStoarge.setItem('selectedtask', selectedTask); 
localStorage.setItem('tasks', JSON.stringify(tasks));

还要确保设置初始值：

const [tasks, setTasks] = 
useState(JSON.parse(localStorage.getItem('tasks')) || []);
const [selectedTask, setSelectedTask] = 
useState(localStorage.getItem('selectedtask') || "")