对onDoubleclick输入的响应编辑值显示当前值而不是空值

Question

我试图创建一个todolist，当你双击一个待办事项列表，它将显示输入，允许你编辑这个值。但是，当用户单击它时，我想在输入编辑中显示前置值，用户可以擦除前值并更改为new和更改值。

我知道，我的解释很糟糕。我将在这里展示我想要的例子，https://todomvc.com/examples/react/#/。我想像这个人一样做mvc，当你双击todolist时，编辑输入值仍然显示在前面的值。

import {useState} from 'react';

export default function App() {
  const [todo, setTodo] = useState([])
  const [input, setInput] = useState('')
  const [edit, setEditing]= useState(null)
  const [edittext , setEditingText] = useState('')

  const InputHandler = (e)=>{
    setInput(e.target.value)
  }

  const SubmitHandler = ()=>{
    setTodo([...todo, {text:input, id: Math.random()*1000}])
    setInput('')
  }
  const EditHandler = (e)=>{
    setEditingText(e.target.value)
    console.log(e.target.value)
  }

  const SubmitEdit = (id)=>{
    setTodo([...todo].map((todos)=>{
      if(todos.id === id){
        todos.text = edittext
      }
      return todos
    }))
    setEditing(null)
    setEditingText("")
  }
  return (
    <div className="App">
    <input value={input} onChange={InputHandler}/>
    <button onClick={SubmitHandler}>Add</button>  
    {todo.map(todos =>
      <div key={todos.id}>
        {edit === todos.id ? 
       (<><input type="text" value={edittext} onChange={EditHandler}/>
       <button onClick={()=>SubmitEdit(todos.id)}>Edit</button></>)
        : (<p onDoubleClick={()=>setEditing(todos.id)}>{todos.text}</p>)
        }
      </div>
    )}  
    </div>
  );
}

如果我的解释有点混乱，我很抱歉。

谢谢。

Answer 1

这一切都很好，只要更新编辑文本以及双击。

<p onDoubleClick={()=>{setEditing(todos.id); setEditingText(todos.text)}}>{todos.text}</p>

Answer 2

我明白了，首先在输入中编辑todo，您需要使用与添加todo相同的值。<input type="text" value={todos.text} onChange={EditHandler}/>

但是在你的todo应用程序中，你使用了许多状态，这使得一个应用程序很难管理它的状态。

最后，在useState函数中直接使用eventHandler函数(就像您在onDoubleClick中使用的那样)是不好的做法。

试着通过React网站访问思考反应。你会感谢你自己给你的时间。https://reactjs.org/docs/thinking-in-react.html