使用next .js 框架遇到的问题（001）

使用next .js 框架遇到的问题

错误报文：Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.
at input

上述报文源头来自于，input 输入框标签元素。告诉我元素提供了value属性时，没有提供 onChange 处理函数。
也就是 React认为提供了value 属性，就是受控制的组件，受控制的组件就需要onChange 事件去更新它的值。

解决办法：

1.使用受控组件

如果字段值，根据用户输入变化，需要管理它的属性或者状态。并通过onChange 事件来更新
为元素提供一个onChange 函数来更新控制 value 属性或者状态

import React,{useState} from 'react' 
function  CustomForm() {
  const [value,setValue] = useState('')
}
const onChange = (event)=>{
   setValue(event.target.value) // 设置改变value 值
}

return （
  <>
     <form>
         <input type="text" placeholder='请输入值' value={value} onChange={()=>onChange}/>
     </form>
  </>
）

2.使字段只读，用户不可以输入。设置 readOnly 属性

```javascript
import React,{useState} from 'react' 
function  CustomForm() {
  const [value,setValue] = useState('readOnly')
}

return （
  <>
     <form>
         <input type="text" placeholder='请输入值' value={value} readOnly />
     </form>
  </>
）

以上方法，都可以解决警告问题。欢迎大家评论