表单处理的 nextjs 错误答案

【问题标题】：nextjs errors with form handling表单处理的 nextjs 错误
【发布时间】：2020-12-08 23:33:15
【问题描述】：

我正在学习 react 和 nextjs，该页面无需集成 UI 库即可完美运行，因为我安装了 react 套件，我的登录表单页面不再工作，它返回给我一个错误：TypeError: Cannot read property 'value 'of undefined

我的代码是：

import React, { useState } from "react"
import { setCookie, parseCookies } from "nookies"
import { useRouter } from "next/router"

import { Form, FormGroup, FormControl, ControlLabel, HelpBlock, Button, Input } from 'rsuite';


const Login = () => {

  // set initial const
  const router = useRouter()

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  // handle event submit
  const handleSubmit = async (e) => {
    e.preventDefault();

    // fetch user
    const response = await fetch( process.env.urlHeadless + '/api/cockpit/authUser', {
      method: "post",
      headers: {
        "Content-Type": "application/json",
        'Cockpit-Token': process.env.loginKey,
      },
      body: JSON.stringify({
        user: username,
        password: password
      })
    })

    // if user exists
    if (response.ok) {

      const loggedUser = await response.json()

      // set cookie with api_key
      setCookie("", "tokenId", loggedUser._id, {
        maxAge: 30 * 24 * 60 * 60,
        path: "/"
      })

      // redirect to dashboard
      return (router.push("/dashboard"))
    } else if (response.status === 412) {
      alert('compila il form')
    } else if (response.status === 401) {
      alert('credenziali di accesso errate')
    }

  }

  return (
    <>

  <Form>
    <FormGroup>
      <ControlLabel>Username</ControlLabel>
      <FormControl type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      <HelpBlock>Required</HelpBlock>
    </FormGroup>
    <FormGroup>
      <ControlLabel>Password</ControlLabel>
      <FormControl type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
    </FormGroup>
    <FormGroup>
      <Button appearance="primary" onClick={handleSubmit}>Submit</Button>
    </FormGroup>
  </Form>
    </>
  )
}

// async function
export async function getServerSideProps(context) {

  // get cookie value
  const cookies = parseCookies(context).token;

  // if cookie has value
  if (cookies) {
    return {

      // redirect to dashboard
      redirect: {
        destination: '/dashboard',
        permanent: false,
      },
    }
  }

  return { props: {} };
}

export default Login;

我也尝试使用useRef 而不是useState，但它不起作用......我哪里错了？提前谢谢你

【问题讨论】：

标签： forms input next.js

【解决方案1】：

看起来rsuite 组件可能具有不同的onChange 实现，如其docs 中所述

onChange    (formValue:Object, event:Object) => void    Callback fired when data changing

如果您想要该事件，请尝试更改代码中的 onChange 回调以获取第二个参数：

<FormControl 
   ... 

   onChange={(value, e) => setUsername(e.target.value)}  
/>

【讨论】：