warning.js:33 Warning: A component is changing a controlled input of type text to be uncont-蒲公英云

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);
                    }
                }/>