Warning: A component is changing a controlled input of type text to be uncontrolled.-优快云博客

本文通过一个具体的React应用实例，详细解析了在使用controlled组件时遇到的问题及解决方案，特别是如何正确处理事件参数，避免组件状态切换带来的警告。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天踩到的坑，转过来，作参考：

报错内容：

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

//第二个
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这个对象，我打印看了是，那这个对象很显然是没有value属性的，event.target.value其实就是undefined，那结果自然也就不会对了

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

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