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

分手后的思念是犯贱 2022-05-25 11:08 116阅读 0赞

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

报错内容：

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学的差不多，都是很好理解的，只是有时候我们忽略掉了，仔细查错误的原因，还是很好解决的

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