Forms 表单处理的nextjs错误

我正在学习react和nextjs，该页面在没有集成UI库的情况下工作得非常好，因为我安装了react套件，我的页面和登录表单不再工作，它返回一个错误：

TypeError:无法读取未定义的属性“值”

我的代码是：

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;

import React，{useState}来自“React”
从“nookies”导入{setCookie，parsecookie}
从“下一个/路由器”导入{useRouter}
从'rsuite'导入{Form，FormGroup，FormControl，ControlLabel，HelpBlock，Button，Input}；
常量登录=（）=>{
//设置初始常数
const router=useRouter（）
const[username，setUsername]=useState（“”）；
const[password，setPassword]=useState（“”）；
//处理事件提交
const handleSubmit=async（e）=>{
e、 预防默认值（）；
//获取用户
const response=wait fetch（process.env.urlHeadless+'/api/caffick/authUser'{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
“驾驶舱令牌”：process.env.loginKey，
},
正文：JSON.stringify({
用户：用户名，
密码：密码
})
})
//如果用户存在
if（response.ok）{
const loggedUser=await response.json（）
//使用api_键设置cookie
setCookie（“，”令牌id“，”loggedUser.\u id{
最大值：30*24*60*60，
路径：“/”
})
//重定向到仪表板
返回（router.push（“/dashboard”））
}else if（response.status==412）{
警报（‘编译il表单’）
}else if（response.status==401）{
警报（'credenziali di accesso errate'）
}
}
返回(
用户名
setUsername（e.target.value）}/>
要求的
密码
setPassword（e.target.value）}/>
提交
)
}
//异步函数
导出异步函数getServerSideProps（上下文）{
//获取cookie值
const cookies=parseCookies（context.token）；
//如果cookie有价值
如果（cookies）{
返回{
//重定向到仪表板
重定向：{
目标：'/dashboard'，
永久性：假，
},
}
}
返回{props:{}；
}
导出默认登录；

---

我还尝试使用

useRef

而不是

useState

，但没有成功。。。我错在哪里？提前感谢

看起来

rsuite

组件可能有不同的

onChange

实现，如其

如果需要该事件，请尝试更改代码中的

onChange

回调以获取第二个参数：

<FormControl 
   ... 

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

setUsername（e.target.value）}
/>

谢谢你，伙计，工作很完美

<FormControl 
   ... 

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