warning.js:33 Warning: A component is changing a controlled input of type text to be uncont

今天在做一个小练习的时候，真的是踩了很多坑，还好最后还是爬出来了，现在分享出来，希望帮到遇到和我一样问题的你，也是避免自己再次踩坑里

报错内容：

Warning: A component is changing a controlled input of type text to be uncontrolled. 
Input elements should not switch from controlled to uncontrolled (or vice versa). 
Decide between using a controlled or uncontrolled input element for the lifetime of the component.

其实网上有解决这个问题的方法，但我没太看懂，下面先看看我的代码

Form组件中的代码

import React, {Component} from 'react';
export default class Form extends Component{
    render(){
        let {change,val} = this.props;
        return(
            <form>
                <input type="text" value={val} onChange={
                    (event)=>{//event传参不可少（此处少了，就会报上面的警告）
                        change(event);//这个event也不可少，少了会报错（Uncaught TypeError: Cannot read property 'target' of undefined)
                    }
                }/>
                <input type="text" value={val} onChange={
                    (event)=>{
                        change(event);                    }
                }/>
                <input type="text" value={val} onChange={
                    (event)=>{
                        change(event);
                    }
                }/>
            </form>
        )
    }
}

App.js中的代码：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Form from 'events/Form.js';

class Top extends React.Component{
constructor(props){
    super(props);
    this.state = {
        val:""
    }
    this.change = this.change.bind(this)

}
    change(event){
        this.setState({
            val:event.target.value
        })
    }
render(){
        let{val} = this.state;
        return(
            <div className="top">
                <Form val={val} change={this.change}/>//引入Form组件
            </div>
        )
    }
}

我自己的错是出在了没有给事件传event参数，下面是Form.js中的核心代码（App.js中的代码都挺核心的哈）

                <input type="text" value={val} onChange={
                    (event)=>{
                        change(event);
                    }
                }/>

第一个event没有传，就会报上面的警告，原因是，这时在App.js中的event.target不是input这个对象，我打印看了是<react></react>，那这个对象很显然是没有value属性的，event.target.value其实就是undefined，那结果自然也就不会对了

第二个没有传，这个肯定要报错的，我试了试报的错是：Uncaught TypeError: Cannot read property 'target' of undefined

其实上面这两个问题，只要js学的差不多，都是很好理解的，只是有时候我们忽略掉了，仔细查错误的原因，还是很好解决的

当然我不知道报这个错的原因是不是都是我上面提到的，那，我只是把我自己遇到的问题以及怎么解决记录在了上面，如果您的问题和我的不一样，那很抱歉不能帮到您，当然您也可以把您的错留言给我，大家一起想想办法，也是一种成长