Next.js 按钮未返回正确输入

Question

我正在使用 next.js 创建一个待办事项列表应用程序，每当您在输入字段中输入任何内容时，它都会进入控制台，这是正确的。 但是每当我点击按钮时，输入应该会像待办事项列表应用程序一样自动显示，但是这个会不断重新加载，一旦点击按钮，它就会重新加载，请帮助我

import Link from 'next/link'
import Head from 'next/head'
import Script from 'next/script'
import { useState } from 'react'



export default function FirstPost() {
const[userInput,setUserInput] =useState('')
//create state props
const[todoList,setTodoList] =useState([])
const handleChange = (e) =>{
    e.preventDefault();

    setUserInput = (e.target.value)
    console.log(setUserInput)
}

//handling submit
const handleSubmit =()=>{
e.preventDefault
setTodoList({
  SetUserinput,
  ...todoList

})

}

  return (
    <>
    <Head>
    <title>Todo List</title>
    </Head>
 
    
    
    <h1>TodoList App</h1>
    <form>
        <input type="text" onChange={handleChange}/><button onClick={handleSubmit}>Submit</button>
        </form>
     <ul>
       {
       todoList.length>=1 ? todoList.map((todo,idx) =>{
         return <li key={idx}>{todo}</li>
       })
       :'Enter a Todo Item'

      }
     </ul>


        <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
      
      
    </>
    
  )
}

Answer 1

//handling submit
const handleSubmit =()=>{
e.preventDefault
setTodoList({
  SetUserinput,
  ...todoList

})

给 function 一个参数e ，你忘了给参数。 将代码更改为：

//handling submit
    const handleSubmit =(e)=>{
    e.preventDefault
    setTodoList({
      SetUserinput,
      ...todoList
    
    })

Answer 2

所以我能够解决错误

这是代码

import Link from 'next/link'
import Head from 'next/head'
// import Script from 'next/script'
import { useState } from 'react'



export default function Todo() {
const[userInput,setUserInput] =useState('')
//create state props
const[todoList,setTodoList] =useState([])
const handleChange = (e) =>{
    e.preventDefault();
    setUserInput(e.target.value)
    console.log(userInput)
}

//handling submit
const handleSubmit =(e)=>{

setTodoList([...todoList,{elt:userInput}])
console.log(todoList)
setUserInput(' ')
}

//delete functionality
const handleDelete =(todo)=>{
  const updatedArr = todoList.filter(todoItem=> todoList.indexOf(todoItem) != todoList.indexOf(todo) )

  setTodoList(updatedArr)
}

  return (
    <>
    <Head>
    <title>Todo List</title>
    </Head>
    <h1>TodoList App</h1>
        <input type="text" placeholder="enter a todo item"value={userInput} onChange={handleChange}/>
        <button  onClick={handleSubmit}>Submit</button>
     <ul>
       {
       todoList.length>=1 ? todoList.map((todo,idx) =>{
         return <li key={idx}>{todo.elt}<button onClick ={(e) =>{
           e.preventDefault()
           handleDelete(todo)
        
        }}  >Delete</button></li>
       })
       :'Enter a Todo Item'

      }
     </ul>


        <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
      
      
    </>
    
  )
}

没有风格的完整待办事项列表应用程序

Next.js 按钮未返回正确输入

问题描述

2 个解决方案

解决方案1
0 2022-02-02 15:59:13

解决方案2
0 2022-02-03 14:43:57

Next.js 按钮未返回正确输入

问题描述

2 个解决方案

解决方案1 0 2022-02-02 15:59:13

解决方案2 0 2022-02-03 14:43:57

解决方案1
0 2022-02-02 15:59:13

解决方案2
0 2022-02-03 14:43:57